/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src\\app\\layout.tsx","import":"Schibsted_Grotesk","arguments":[{"subsets":["latin","latin-ext"],"weight":["400","500","700"],"display":"swap","variable":"--font-schibsted"}],"variableName":"schibsted"} ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/56069e83bb5b2425-s.p.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/91601dd83defba07-s.p.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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/56069e83bb5b2425-s.p.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/91601dd83defba07-s.p.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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/56069e83bb5b2425-s.p.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/91601dd83defba07-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Schibsted Grotesk Fallback';src: local("Arial");ascent-override: 93.46%;descent-override: 24.67%;line-gap-override: 0.00%;size-adjust: 104.49%
}.__className_b9ac44 {font-family: 'Schibsted Grotesk', 'Schibsted Grotesk Fallback';font-style: normal
}.__variable_b9ac44 {--font-schibsted: 'Schibsted Grotesk', 'Schibsted Grotesk Fallback'
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src\\app\\layout.tsx","import":"Hanken_Grotesk","arguments":[{"subsets":["latin","latin-ext"],"weight":["400","500","600","700"],"display":"swap","variable":"--font-hanken"}],"variableName":"hanken"} ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/a6c19694cd327cd4-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/851c4691abdf3def-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/a8a8dd7277bab4cf-s.p.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/313510e2713fb214-s.p.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/a6c19694cd327cd4-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/851c4691abdf3def-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/a8a8dd7277bab4cf-s.p.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/313510e2713fb214-s.p.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/a6c19694cd327cd4-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/851c4691abdf3def-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/a8a8dd7277bab4cf-s.p.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/313510e2713fb214-s.p.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/a6c19694cd327cd4-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/851c4691abdf3def-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/a8a8dd7277bab4cf-s.p.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/313510e2713fb214-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Hanken Grotesk Fallback';src: local("Arial");ascent-override: 99.07%;descent-override: 30.02%;line-gap-override: 0.00%;size-adjust: 100.94%
}.__className_b8e0ed {font-family: 'Hanken Grotesk', 'Hanken Grotesk Fallback';font-style: normal
}.__variable_b8e0ed {--font-hanken: 'Hanken Grotesk', 'Hanken Grotesk Fallback'
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src\\app\\layout.tsx","import":"Bricolage_Grotesque","arguments":[{"subsets":["latin","latin-ext"],"weight":["400","500","700","800"],"display":"swap","variable":"--font-bricolage"}],"variableName":"bricolage"} ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/93a6e477e1480c92-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/c7e0cf6c760983e7-s.p.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/9d5a263311222317-s.p.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;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/93a6e477e1480c92-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/c7e0cf6c760983e7-s.p.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/9d5a263311222317-s.p.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;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/93a6e477e1480c92-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/c7e0cf6c760983e7-s.p.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/9d5a263311222317-s.p.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;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/93a6e477e1480c92-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/c7e0cf6c760983e7-s.p.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/9d5a263311222317-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Bricolage Grotesque Fallback';src: local("Arial");ascent-override: 88.21%;descent-override: 25.61%;line-gap-override: 0.00%;size-adjust: 105.43%
}.__className_8bc041 {font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback';font-style: normal
}.__variable_8bc041 {--font-bricolage: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback'
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src\\app\\layout.tsx","import":"Instrument_Sans","arguments":[{"subsets":["latin","latin-ext"],"weight":["400","500","600","700"],"display":"swap","variable":"--font-instrument"}],"variableName":"instrument"} ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/adb45196eddef626-s.p.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/26d0ba92e140f0dc-s.p.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: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/adb45196eddef626-s.p.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/26d0ba92e140f0dc-s.p.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: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/adb45196eddef626-s.p.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/26d0ba92e140f0dc-s.p.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: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/adb45196eddef626-s.p.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/26d0ba92e140f0dc-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Instrument Sans Fallback';src: local("Arial");ascent-override: 94.42%;descent-override: 24.33%;line-gap-override: 0.00%;size-adjust: 102.74%
}.__className_8178ce {font-family: 'Instrument Sans', 'Instrument Sans Fallback';font-style: normal
}.__variable_8178ce {--font-instrument: 'Instrument Sans', 'Instrument Sans Fallback'
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src\\app\\layout.tsx","import":"Spline_Sans_Mono","arguments":[{"subsets":["latin","latin-ext"],"weight":["400","500"],"display":"swap","variable":"--font-spline-mono"}],"variableName":"splineMono"} ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/59829bb575d36b50-s.p.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/e02f7a71372872a3-s.p.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: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/59829bb575d36b50-s.p.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/e02f7a71372872a3-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Spline Sans Mono Fallback';src: local("Arial");ascent-override: 71.59%;descent-override: 17.57%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_7dee89 {font-family: 'Spline Sans Mono', 'Spline Sans Mono Fallback';font-style: normal
}.__variable_7dee89 {--font-spline-mono: 'Spline Sans Mono', 'Spline Sans Mono Fallback'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   METU Média Design - refined system + 4 presets + fullscreen
   ============================================================ */

:root {
  --ff: var(--font-hanken), system-ui, sans-serif;
  --ff-display: var(--font-schibsted), var(--font-hanken), system-ui, sans-serif;
  --ff-mono: var(--font-spline-mono), ui-monospace, monospace;

  --paper: #f4f4f1;
  --paper-2: #ecece7;
  /* --bg = a háttérszín aliasa (több elem így hivatkozik rá); var(--paper)-t követi,
     ezért dark módban is helyes (a --paper felülíródik) - eddig definiálatlan volt, így
     pl. a .po-undotoast szövege érvénytelen színt kapott = láthatatlan volt */
  --bg: var(--paper);
  --card: #ffffff;
  --ink: #15171a;
  --ink-2: #6b6e73;
  --muted: #9a9ca2;
  --line: rgba(21, 23, 26, .12);
  --line-2: rgba(21, 23, 26, .22);
  /* HIÁNYZÓ TOKENEK PÓTLÁSA (2026-08-10). A 2026-08-08-i nézetek (Projekthét, Kulcsok,
     Onboarding) és a Habilitáció összesen 30 helyen hivatkoztak a `--bg-2` és `--ink-3`
     nevekre, amiket SOHA nem definiált senki. Az érvénytelen változó némán elszáll: a
     háttér átlátszó maradt, a halvány szöveg pedig szín nélkül, teljes erővel jelent meg -
     ettől néztek ki nyersen ezek a felületek (user-jelzés: „hová lettek a UI standardjeink").
     Aliasként a MEGLÉVŐ tokenekre mutatnak, így dark módban is automatikusan helyesek. */
  --bg-2: var(--paper-2);
  --ink-3: var(--muted);
  /* ALAPSZÍN: semleges szürke - a piros (--hot) KIZÁRÓLAG az aktív/kiemelt
     elemeké, különben minden "hibának" néz ki (felhasználói visszajelzés) */
  --brand: #5b6470;
  --brand-text: #4a525d;
  --brand-100: #eceef1;
  --hot: #d7144b;
  --hot-100: #fbe3ea;
  /* HARMADIK FÉLNÉL / továbbítás: nyugodt kék, mert ott NEM a felhasználó lép.
     A piros (--hot) marad az "most rajtad a sor" jelentésé. */
  --fwd: #2563eb; --fwd-100: #e8eefc;
  --yellow: #ffe678;
  --yellow-deep: #e9c95a;
  --danger: #c0203f;
  /* ANGOL NYELVŰ KÉPZÉS (MEDI ENG) saját színe. Külön kellett, mert a piros (--hot) ebben a
     rendszerben mostantól az elvárt óraszámtól való ELTÉRÉST jelenti - ha az angol is piros
     lenne, a két, egymástól független dolog összeolvadna. */
  --en: #8a5a2b; --en-100: #f3e9de;
  --g0: #17935f; --g0-100: #e2f3ec;
  --g1: #2f6fe0; --g1-100: #e5edfb;
  --g2: #7b3fe4; --g2-100: #ece4fb;
  --g3: #9096a0; --g3-100: #edeef0;
  /* TANTERVI VONAL (mi mire épül): petrol. Se a --hot pirossal (aktív/eltérés), se a
     sáv-színekkel (g0-g3) nem eshet egybe, mert egyszerre látszanak egy képernyőn. */
  --track: #0e7490; --track-100: #e2f1f5;

  --r-card: 8px;
  --r-chip: 6px;
  /* TÉRKÖZ-SKÁLA (2026-08-19, Posta-designrendszer S1). EGY létra az egész felületnek,
     hogy a köztes (5/6/7/9/10/11/13/14px) értékek ne írjanak minden blokknak saját ritmust:
       --sp1  4px - chipen belül, ikon és szöveg között
       --sp2  8px - elemek egy blokkon belül
       --sp3 12px - kártya belső paddingja, alszekció-rés
       --sp4 16px - blokkok közti rés
       --sp5 24px - sávok / nagy szekciók közti rés
     A 0/1/2/3px mikro-értékek (chip-belső, jelölő-vastagság) szándékosan a skálán KÍVÜL
     maradnak - azok nem térközök, hanem geometria. */
  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px;
  --shadow-1: 0 1px 2px rgba(16, 17, 20, .05);
  --shadow-2: 0 1px 2px rgba(16, 17, 20, .04), 0 14px 32px -16px rgba(16, 17, 20, .18);
  --head-ls: -.015em;
  --pad: clamp(12px, 1.6vw, 20px); /* szukebb keret - a logo/menu ne uljon melyen bent */
}

/* ---- presets (font + feel) ---- */
html[data-preset='neue'] { --ff-display: var(--font-schibsted), system-ui, sans-serif; --ff: var(--font-hanken), system-ui, sans-serif; --r-card: 6px; }
html[data-preset='tordeles'] { --ff-display: var(--font-bricolage), system-ui, sans-serif; --ff: var(--font-hanken), system-ui, sans-serif; --r-card: 4px; }
html[data-preset='muszerfal'] { --ff-display: var(--font-instrument), system-ui, sans-serif; --ff: var(--font-instrument), system-ui, sans-serif; --r-card: 10px; }
html[data-preset='muterem'] { --ff-display: var(--font-bricolage), system-ui, sans-serif; --ff: var(--font-hanken), system-ui, sans-serif; --r-card: 14px; --paper: #f4f1ea; --paper-2: #ece6da; --card: #fbf9f4; --ink: #2a2623; --ink-2: #6b645c; --line: #e5ddd0; --line-2: #d8cdba; --yellow-deep: #e6cf8a; }

* { box-sizing: border-box; }
html, body { height: 100%; }
/* OLVASHATÓSÁG-SKÁLA (2026-08-18, user-kérés): a felület ~824 betűmérete rem-alapú,
   ezért a root font-size hangolása MINDET együtt mozgatja. A --md-fskala változót a
   fejléc „A" gombja állítja, és a layout.tsx festés előtti szkriptje írja ki (villanás
   nélkül). A 100% a böngésző saját alapbeállítását őrzi: aki ott nagyobbra állította,
   annak az marad a kiindulás, a skála arra ül rá. */
html { -webkit-text-size-adjust: 100%; font-size: calc(100% * var(--md-fskala, 1)); }
/* modern, témába illő görgetősávok a natív helyett (mindkét témában; a szándékosan
   rejtett sávok - .mt-tabs stb. - felülírják ezt saját scrollbar-width:none-nal) */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand) 42%, transparent) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand) 34%, transparent); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--brand) 60%, transparent); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--ff); font-size: calc(15px * var(--md-fskala, 1)); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* LINK-SZÍN (2026-08-10, user-jelzés: „miért ilyen láthatatlan kék a link dark módban?").
   Eddig NEM volt globális link-szabály, ezért minden osztály nélküli <a> a böngésző
   alapértelmezett sötétkékjét kapta - világos témán még ment, SÖTÉTEN viszont a sötét
   háttéren majdnem olvashatatlan volt. A rendszer link-színe a --brand-text, ami mindkét
   témában olvasható (világos #4a525d, sötét #aab3bf), és nem a --hot, mert a piros ebben
   a rendszerben az AKTÍV/kiemelt elemé, nem a dekorációé.
   Aki saját színt ad a linkjének (pl. .hab-link, .szv-hivatalos a), azt az osztály felülírja. */
a { color: var(--brand-text); text-underline-offset: 2px; }
a:hover { color: var(--hot); }
.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; }
.mono { font-family: var(--ff-mono); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- fullscreen shell ---- */
.app-shell { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.viewport { flex: 1; min-height: 0; position: relative; }
/* Szél-swipe: a Mátrixon és az Órarenden a képernyő bal/jobb szélén húzva vált nézetet
   (a középső rész marad a tartalom pásztázása/görgetése). CSAK mobilon; a sáv a függőleges
   középen ül, hogy ne takarja a sarki vezérlőket (zoom, minimap, zárolás). */
.vp-edge { display: none; }
.vp-edge-hint { pointer-events: none; }
@media (max-width: 720px) {
  .vp-edge { position: absolute; top: 25%; bottom: 25%; width: 26px; z-index: 30; display: flex; align-items: center; touch-action: none; -webkit-tap-highlight-color: transparent; }
  /* a BAL sáv szélesebb (egykezes elérés: a hüvelykujj nem éri el a bal szélt) - a képernyő
     bal 40%-a (a függőleges középső sávban) is nézetváltó. A Mátrixon tiszta nyereség (nem
     görget). Az Órarenden ez a rész swipe-zóna, ezért ott a jobb oldalon / fent-lent görgess;
     a pan-y a vízszintes swipe-ot a JS-nek adja (nem vízszintes böngésző-gesztus). */
  .vp-edge--l { left: 0; width: 40vw; touch-action: pan-y; justify-content: flex-start; background: linear-gradient(to right, color-mix(in srgb, var(--hot) 16%, transparent), transparent 64px); }
  .vp-edge--r { right: 0; justify-content: flex-end; background: linear-gradient(to left, color-mix(in srgb, var(--hot) 16%, transparent), transparent 64px); }
  /* alsó sáv: egykezes elérés - a sarkok szabadok maradnak (zoom, jelmagyarázat, zárolás),
     az irányt a húzás iránya dönti el, nem az, melyik szélről indul */
  .vp-edge--b { top: auto; left: 72px; right: 72px; bottom: 0; width: auto; height: calc(26px + env(safe-area-inset-bottom, 0px)); justify-content: center; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .vp-edge--b .vp-edge-hint { font-size: 1.15rem; letter-spacing: .3em; }
  .vp-edge-hint { color: var(--hot); opacity: .2; font-size: 1.7rem; font-weight: 800; line-height: 1; padding: 0 2px; animation: vpEdgePulse 2.8s ease-in-out infinite; }
}
@keyframes vpEdgePulse { 0%, 100% { opacity: .1; } 50% { opacity: .32; } }
.wrap { width: 100%; padding: 0 var(--pad); }

/* ---- masthead ---- */
/* fejlec-csik: kompakt (felhasznaloi keres - ne vigyen el ennyi helyet) */
.masthead { flex: none; background: var(--card); border-bottom: 1px solid var(--line); padding: 8px 0; }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.brandmark { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* METU-logo a fejlecben (2026-08-10). A ket SVG fix szinnel keszult (fekete/feher), ezert
   nem szinezheto currentColor-ral - a temat a lathatosag valtasa oldja meg. Aranytarto
   magassag-alapu meretezes: a wordmark 414x149.56, tehat szeles. */
.brandmark .logo { height: 30px; width: auto; flex: none; display: block; }
.brandmark .logo--dark { display: none; }
html[data-theme='dark'] .brandmark .logo--light { display: none; }
html[data-theme='dark'] .brandmark .logo--dark { display: block; }
.kicker { font-size: calc(10px * var(--md-fskala, 1)); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-text); }
/* a név hangsúlyos jelvényben a fejléc első sorában */
.kicker-name { display: inline-block; margin-left: 7px; padding: 2.5px 10px; border-radius: 999px; background: var(--hot); color: #fff; font-weight: 800; letter-spacing: .1em; }
.subtitle { margin-top: 1px; font-size: .74rem; color: var(--ink-2); }

/* ---- toolbar ---- */
.toolbar { flex: none; background: var(--card); border-bottom: 1px solid var(--line); }
/* az oldalso padding a .wrap-pel azonos (var(--pad)) - a menu a logoval EGY vonalban kezdodik */
.toolbar__inner { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 6px var(--pad); }
/* menü/fül-váltók: visszafogott, szögletes fülek - az aktívat a piros alávonás jelöli.
   NINCS belső padding/gap: a kijelölés a menü TELJES magasságát kitölti */
.viewtoggle { display: inline-flex; background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; padding: 0; gap: 0; overflow: hidden; }
.viewtoggle button { border: 0; background: transparent; font-family: var(--ff); font-size: .82rem; font-weight: 600; padding: 8px 15px; border-radius: 0; cursor: pointer; color: var(--ink-2); }
.viewtoggle button.is-on { background: var(--card); color: var(--hot); font-weight: 800; box-shadow: inset 0 -2px 0 var(--hot); }
/* on-hover piros aláhúzás (user-kérés 2026-08-08) - az aktívnál halványabb */
.viewtoggle button:hover:not(.is-on) { color: var(--hot); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--hot) 55%, transparent); }
/* A FŐMENÜ a teljes szélességet elfoglalja (a keresőcsík jobb széléig ér) és nem levágott.
   2026-08-10 (user-döntés, a 08-08-i vízszintes görgetést LEVÁLTJA): a menü NEM görgethető
   oldalra. A görgetés 17 menüpontnál használhatatlan lett - a jobb szélső pontok némán
   láthatatlanok maradtak, és semmi nem árulta el, hogy vannak. Helyette TÖRDELŐDIK: minden
   menüpont egyszerre látszik, több sorban. Keskeny kijelzőn tömörebb gomb, hogy kevesebb sor
   kelljen. Ha ide új menüpont kerül, ELLENŐRIZD 390px-en, hány sor lesz belőle. */
.viewtoggle--nav { flex: 1 1 100%; width: 100%; overflow: visible; flex-wrap: wrap; }
.viewtoggle--nav button { flex: 0 1 auto; white-space: nowrap; }
/* JOBB SZÉL A MENÜ-SÁVBAN (2026-08-10, user-kérés): a kereső és a mentés-jelző a menü UTOLSÓ
   sorának jobb szélére kerül, nem külön sávba. A margin-left:auto tolja jobbra; ha nem fér ki,
   a flex-wrap miatt új sorba csúszik, de akkor is jobbra igazítva - vízszintes görgetés nincs. */
/* A gomb-konténer asztalon ÁTLÁTSZÓ: a gombok közvetlenül a nav flex-elemei, tehát
   tördelnek, és a jobb-szél csoport a záró sor jobb oldalára ül. */
.nav-scroll { display: contents; }
.viewtoggle--nav .nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 3px 5px 3px 12px; min-width: 0; }
.viewtoggle--nav .search-wrap { margin-left: 0; flex: 0 1 260px; min-width: 120px; }
.viewtoggle--nav .search { height: 28px; padding: 4px 28px 4px 30px; font-size: .8rem; border-radius: 8px; background-position: 9px center; background-size: 13px; }
.viewtoggle--nav .autosave-chip { flex: none; }
@media (max-width: 900px) {
  /* MOBIL (2026-08-10, user-döntés): a menü EGY sor, vízszintesen görgethető - itt ez
     rendben van, mert az aktív fül automatikusan a képbe úszik (l. CurriculumApp effekt).
     A KERESŐ viszont a menü ALATT, SAJÁT teljes szélességű sorban áll. */
  .nav-scroll {
    display: flex; flex: 1 1 100%; width: 100%; flex-wrap: nowrap; gap: 2px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .nav-scroll::-webkit-scrollbar { display: none; }
  .nav-scroll button { flex: none; }
  .viewtoggle--nav .nav-right { flex: 1 1 100%; padding: 4px 2px 2px; }
  .viewtoggle--nav .search-wrap { flex: 1 1 auto; }
}
/* (a keskeny kijelzos tomorites a 900px-es blokkban van, lentebb - ide ne kerüljön masik) */
.search { flex: 1 1 200px; max-width: 300px; padding: 8px 12px 8px 32px; font-family: var(--ff); font-size: .9rem; color: var(--ink); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239a9ca2' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.6' y2='16.6'/%3E%3C/svg%3E") no-repeat 11px center; border: 1px solid var(--line); border-radius: 10px; }
.search:focus { outline: 2px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: 1px; border-color: var(--brand); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-family: var(--ff); font-size: .8rem; font-weight: 500; padding: 6px 11px; border-radius: 11px; cursor: pointer; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); }
.chip:hover { border-color: var(--line-2); color: var(--ink); }
.chip.is-on { color: #fff; background: var(--hot); border-color: var(--hot); }
.spacer { flex: 1 1 auto; }
.presetsel { font-family: var(--ff); font-size: .82rem; font-weight: 600; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.instrsel { max-width: 190px; }
.instrsel.is-on { background: var(--hot-100); border-color: var(--hot); color: var(--hot); font-weight: 700; }
.instrsel option { background: var(--card); color: var(--ink); font-weight: 500; }
.btn { font-family: var(--ff); font-size: .82rem; font-weight: 600; padding: 8px 12px; border-radius: 8px; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--ink); transition: border-color .12s, background .12s; }
.btn:hover { border-color: var(--line-2); }
.btn.is-on { background: var(--hot); border-color: var(--hot); color: #fff; }
.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* témafüggetlen hover: az alap felé sötétít, DE a szöveg (--paper) kontrasztja megmarad
   (a régi fix #000 dark módban fekete alapon sötét betűt adott - olvashatatlan) */
.btn--ink:hover { background: color-mix(in srgb, var(--ink) 85%, #000); border-color: color-mix(in srgb, var(--ink) 85%, #000); }
.btn--hot { background: var(--hot); border-color: var(--hot); color: #fff; }
.btn--hot:hover { background: color-mix(in srgb, var(--hot) 86%, #000); border-color: color-mix(in srgb, var(--hot) 86%, #000); color: #fff; }
.btn--danger { color: var(--brand-text); }
.btn--danger:hover { border-color: var(--hot); background: var(--hot-100); }
/* TILTOTT GOMB. Eddig NEM volt egyetlen .btn:disabled szabály sem, ezért a tiltott gomb
   pontosan úgy nézett ki, mint az aktív - futó beolvasás alatt a felhasználó ötször
   rányomott a „Mai levelek"-re, és a kérés minden alkalommal csak a naplóban halt el
   (2026-07-30). A tiltás mostantól LÁTSZIK is. */
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--line); }
/* „épp dolgozik": nyugodt lüktetés a homokórás felirat mellé - a gomb nem halott, csak
   most nem indítható vele semmi. */
.btn--busy { cursor: progress; animation: btnBusy 1.8s ease-in-out infinite; }
@keyframes btnBusy { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .btn--busy { animation: none; opacity: .6; } }
.themebtn { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; cursor: pointer; font-size: 1rem; }
.themebtn:hover { border-color: var(--brand); }
/* témaváltó a jobb felső sarokban: fixen a menü és minden sáv FÖLÖTT (csak a modálok takarják) */
.masthead .wrap { position: relative; }
.themebtn--head { position: fixed; top: 12px; right: 14px; z-index: 70; box-shadow: 0 2px 10px rgba(16, 17, 20, .18); }
/* teljes kepernyo gomb - kozvetlenul a tema-valto mellett */
.fsbtn--head { right: 58px; }
/* értesítés-csengő - a sorban a következő hely; ha nincs fullscreen-gomb, közelebb csúszik */
.notifbtn--head { right: 58px; }
.notifbtn--head.notifbtn--shift { right: 102px; }

/* ============================================================
   MAP / NODE VIEW
   ============================================================ */
.view-pane { position: absolute; inset: 0; }
.mapwrap { position: absolute; inset: 0; }
.map-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--ink-2); font-size: .95rem; line-height: 1.6; padding: 20px; pointer-events: none; z-index: 2; }
.map-empty b { color: var(--brand-text); }
.legend { position: absolute; left: 14px; bottom: 14px; z-index: 6; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: .72rem; color: var(--ink-2); }
.legend-toggle { font-family: var(--ff); font-weight: 700; color: var(--ink-2); background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid var(--line); cursor: pointer; box-shadow: var(--shadow-1); }
.legend:not(.open) .legend-toggle { width: 34px; height: 34px; padding: 0; font-size: 1.05rem; border-radius: 50%; }
.legend.open .legend-toggle { align-self: flex-start; font-size: .72rem; padding: 5px 10px; border-radius: 8px; }
.legend-toggle:hover { border-color: var(--brand); color: var(--brand-text); }
.legend-body { background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-1); }
.legend .row { display: flex; align-items: center; gap: 7px; }
.legend .ln { width: 22px; border-top: 2px solid var(--brand); }
.legend .ln.build { border-top-style: dashed; }
.legend .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; border: 2px solid var(--card); }
.legend .dot.out { background: var(--brand); }
.legend .dot.in { background: var(--card); box-shadow: inset 0 0 0 2px var(--brand); }
.legend .hint { color: var(--muted); font-size: .68rem; }
.legend .cats { flex-wrap: wrap; gap: 5px 8px; }
.legend .cat { display: inline-flex; align-items: center; gap: 5px; font-size: .66rem; font-weight: 600; color: var(--ink-2); }
.legend .cat::before { content: ''; width: 10px; height: 10px; border-radius: 3px; }
.legend .cat.g0::before { background: var(--g0); }
.legend .cat.g1::before { background: var(--g1); }
.legend .cat.g2::before { background: var(--g2); }
.legend .cat.g3::before { background: var(--g3); }

.react-flow__node { animation: fadeIn .26s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes nodeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.prog-rail { display: flex; align-items: flex-start; justify-content: center; padding-top: 12px; width: 132px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 12px; box-shadow: var(--shadow-1); }
.prog-rail span { font-family: var(--ff-display); font-size: 2rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }

.sem-head { width: 252px; padding: 6px 8px; }
.sem-instr { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 4px; }
.sem-instr-h { width: 100%; font-size: .56rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.sem-ichip { font-family: var(--ff); font-size: .64rem; font-weight: 500; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.sem-ichip:hover { border-color: var(--brand); color: var(--brand-text); }
.sem-ichip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.sem-head .sem-prog { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-text); }
.sem-head .sem-lbl { font-family: var(--ff-display); font-size: 1.35rem; font-weight: 700; letter-spacing: var(--head-ls); line-height: 1.05; margin-top: 1px; color: var(--ink); }
.sem-head .sem-stats { font-size: .74rem; color: var(--ink-2); margin-top: 4px; }
.sem-head .sem-stats b { font-weight: 700; font-variant-numeric: tabular-nums; }
.sem-head.empty .sem-lbl { color: var(--muted); }
.sem-head .sem-add { margin-top: 7px; font-family: var(--ff); font-size: .72rem; font-weight: 600; color: var(--brand-text); background: var(--brand-100); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: 7px; padding: 6px 10px; cursor: pointer; }
.sem-head .sem-add:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.cn-card { position: relative; width: calc(248px * var(--md-fskala, 1)); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 11px 13px 12px 15px; box-shadow: var(--shadow-1); cursor: pointer; transition: box-shadow .14s, border-color .14s; }
.cn-card:hover { box-shadow: var(--shadow-2); border-color: var(--line-2); }
.cn-card.dim { opacity: .18; filter: saturate(.5); }
/* kijeloles a matrixon: PIROS (a szurke alap itt nem ad eleg kontrasztot) */
.react-flow__node.selected .cn-card, .cn-card.hit { box-shadow: 0 0 0 3px var(--hot), 0 10px 24px -8px rgba(215, 20, 75, .35); border-color: transparent; }
.cn-card.hit { z-index: 1; }
.cn-accent { position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; background: var(--brand); border-radius: 3px; }
/* ---- besorolás-színek: közös=zöld(g0) · multimédia=kék(g1) · játék=lila(g2) · elmélet=sárga(g3) ---- */
.cn-card.g1, .cc-card.g1 { background: color-mix(in srgb, var(--g1) 6%, var(--card)); border-color: color-mix(in srgb, var(--g1) 24%, var(--line)); }
.cn-card.g2, .cc-card.g2 { background: color-mix(in srgb, var(--g2) 6%, var(--card)); border-color: color-mix(in srgb, var(--g2) 24%, var(--line)); }
.cn-card.g3, .cc-card.g3 { background: color-mix(in srgb, var(--g3) 8%, var(--card)); border-color: color-mix(in srgb, var(--g3) 28%, var(--line)); }
.cn-card.g0 .cn-accent, .cc-card.g0 .cc-accent { background: var(--g0); }
.cn-card.g1 .cn-accent, .cc-card.g1 .cc-accent { background: var(--g1); }
.cn-card.g2 .cn-accent, .cc-card.g2 .cc-accent { background: var(--g2); }
.cn-card.g3 .cn-accent, .cc-card.g3 .cc-accent { background: var(--g3); }
.cn-card.g1 .cn-spec, .cc-card.g1 .cc-spec { color: var(--g1); }
.cn-card.g2 .cn-spec, .cc-card.g2 .cc-spec { color: var(--g2); }
.cn-card.g1 .cn-kw, .cc-card.g1 .cc-kw { color: var(--g1); background: var(--g1-100); }
.cn-card.g2 .cn-kw, .cc-card.g2 .cc-kw { color: var(--g2); background: var(--g2-100); }
.cn-name { font-family: var(--ff-display); font-size: .92rem; font-weight: 600; line-height: 1.2; letter-spacing: -.006em; }
.cn-okt { margin-top: 5px; font-size: .78rem; font-weight: 500; color: var(--ink); }
.cn-okt::before { content: '- '; color: var(--muted); }
.cn-okt.none { color: var(--muted); }
.cn-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cn-tag { font-size: .62rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; background: var(--paper-2); color: var(--ink-2); }
.cn-tag.ea { background: color-mix(in srgb, var(--yellow) 40%, var(--paper-2)); color: #6b5a16; }
.cn-h { font-family: var(--ff-mono); font-size: .7rem; color: var(--ink-2); }
.cn-kr { margin-left: auto; font-family: var(--ff-mono); font-size: .8rem; font-weight: 500; color: var(--ink); }
.cn-spec { font-size: .62rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-text); }
.cn-desc { margin-top: 7px; font-size: .74rem; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cn-desc.is-short { -webkit-line-clamp: 3; font-size: .7rem; line-height: 1.38; }
.cn-edit { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; border: 1px solid var(--line); background: var(--card); border-radius: 6px; cursor: pointer; font-size: .72rem; display: none; }
.cn-card:hover .cn-edit { display: block; }
.cn-kws { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.cn-kw { font-size: .6rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--brand-100); color: var(--brand-text); }
.cn-cats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.cn-cat { font-family: var(--ff); font-size: .56rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: transparent; color: var(--ink-2); border: 1px solid var(--line-2); cursor: pointer; }
.cn-cat:hover { border-color: var(--brand); color: var(--brand-text); }
.cn-foot { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.cn-soft { min-width: 0; font-family: var(--ff-mono); font-size: .63rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-pdf { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: .64rem; font-weight: 700; letter-spacing: .02em; color: var(--brand-text); text-decoration: none; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line)); border-radius: 8px; }
.cn-pdf:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Csoport-zónák („swimlane”, mátrix): nem interaktív színes területek a kártyák mögött.
   A szomszédos sorok darabjai összeérnek -> csoportonként EGY egybefüggő terület. */
.react-flow__node-frame { pointer-events: none !important; z-index: -1 !important; }
.spec-zone { position: relative; }
.spec-zone.zt { border-radius: 18px 18px 0 0; }
.spec-zone.zb { border-radius: 0 0 18px 18px; }
.spec-zone.zt.zb { border-radius: 18px; }
.spec-zone.g0 { background: color-mix(in srgb, var(--g0) 6%, transparent); }
.spec-zone.g1 { background: color-mix(in srgb, var(--g1) 17%, transparent); }
.spec-zone.g2 { background: color-mix(in srgb, var(--g2) 10%, transparent); }
.spec-zone.g3 { background: color-mix(in srgb, var(--g3) 11%, transparent); }
.spec-zone-lbl { position: absolute; top: -11px; left: 16px; z-index: 1; font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 3px 12px; border-radius: 999px; color: #fff; white-space: nowrap; box-shadow: 0 3px 10px rgba(16, 17, 20, .18); }
.spec-zone.g0 .spec-zone-lbl { background: var(--g0); }
.spec-zone.g1 .spec-zone-lbl { background: var(--g1); }
.spec-zone.g2 .spec-zone-lbl { background: var(--g2); }
.spec-zone.g3 .spec-zone-lbl { background: var(--g3); }
/* különálló felirat-node (a piros élek FÖLÖTT) - statikus pozíció, saját háttér, kattintást átereszt */
.spec-zone-lbl.zln { position: static; top: auto; left: auto; display: inline-block; pointer-events: none; }
.spec-zone-lbl.zln.g0 { background: var(--g0); }
.spec-zone-lbl.zln.g1 { background: var(--g1); }
.spec-zone-lbl.zln.g2 { background: var(--g2); }
.spec-zone-lbl.zln.g3 { background: var(--g3); }
.react-flow__node-zonelabel { pointer-events: none; }

.react-flow__handle.hdl { width: 14px; height: 14px; border: 2px solid var(--card); opacity: .6; z-index: 3; transform-origin: center; transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease; }
.react-flow__handle.hdl.out { background: var(--brand); }
.react-flow__handle.hdl.in { background: var(--card); box-shadow: inset 0 0 0 2.5px var(--brand); }
/* megjelenés (szín/gyűrű) - pozíciótól független */
.cn-card:hover .react-flow__handle.hdl { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hot) 14%, transparent); }
.cn-card:hover .react-flow__handle.hdl.in { box-shadow: inset 0 0 0 2.5px var(--hot), 0 0 0 3px color-mix(in srgb, var(--hot) 14%, transparent); }
.react-flow__handle.hdl:hover { opacity: 1 !important; cursor: crosshair; box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 24%, transparent); }
.react-flow__handle.hdl.in:hover { box-shadow: inset 0 0 0 2.5px var(--brand), 0 0 0 5px color-mix(in srgb, var(--brand) 24%, transparent); }
/* növekedés a SAJÁT középpont körül - a React Flow középre-igazító translate-jét megtartva (különben elugrik) */
.cn-card:hover .react-flow__handle-top.hdl, .cn-card:hover .react-flow__handle-bottom.hdl { transform: translate(-50%, 0) scale(1.6); }
.cn-card:hover .react-flow__handle-left.hdl, .cn-card:hover .react-flow__handle-right.hdl { transform: translate(0, -50%) scale(1.6); }
.react-flow__handle-top.hdl:hover, .react-flow__handle-bottom.hdl:hover { transform: translate(-50%, 0) scale(2.3) !important; }
.react-flow__handle-left.hdl:hover, .react-flow__handle-right.hdl:hover { transform: translate(0, -50%) scale(2.3) !important; }
.react-flow__edge.selected .react-flow__edge-path { stroke: var(--hot) !important; stroke-width: 3 !important; }
.react-flow__edge.edge-dim { opacity: .1; }
.react-flow__attribution { display: none; }
.react-flow__controls { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-1); }
.react-flow__controls-button { background: var(--card); border-bottom: 1px solid var(--line); color: var(--ink); }
.react-flow__controls-button:hover { background: var(--paper-2); }
.react-flow__minimap { border: 1px solid var(--line); border-radius: 8px; }
.react-flow__panel { margin: 12px; }
.map-tools { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.map-tools .btn--on { background: var(--brand); color: #fff; border-color: var(--brand); }
.map-tools .btn--on:hover { background: var(--brand); color: #fff; }
/* Igazítás gomb: élénk narancs + fekete betű, hogy ne olvadjon a rácsba */
.map-tools .alignbtn { background: #f5850c; border-color: #c96707; color: #1a1206; font-weight: 800; box-shadow: 0 2px 8px rgba(180, 90, 0, .28); }
.map-tools .alignbtn:hover { background: #ff9d24; border-color: #c96707; color: #000; }

/* ============================================================
   CATALOG VIEW
   ============================================================ */
/* csak függőlegesen görgethet - vízszintes túllógás levágva, különben a mobil swipe is megáll rajta */
.catalog { position: absolute; inset: 0; overflow: hidden auto; padding: 18px var(--pad) 80px; }
/* Egységes nézet-fejléc (PageHead): minden főnézet azonos címsorral, azonos pozícióban indul */
.cat-block-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 11px; margin: 0 0 14px; }
/* A `flex-wrap: wrap` 2026-08-13 ota van itt. Nelkule a lenti 720px-es szabaly
   (`.ag-actions { width: 100% }`) SOSEM tudott ervenyesulni: a nowrap-os sorban a 100%
   szelessegu gombcsoport akkor sem kerult uj sorba, ha nem fert ki - az Esemenyek fejlece
   390px-en 296px-nyire kilogott (merve). Szeles kepernyon semmi nem valtozik tole. */
.cat-block-head .pl { margin: 0; font-family: var(--ff-display); font-size: 1.7rem; font-weight: 700; color: var(--brand-text); letter-spacing: -.02em; }
.cat-block-head .nm { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
/* a Katalógus programonkénti (BA/MA) blokk-fejei kapnak felső térközt */
.catalog > div > .cat-block-head { margin-top: 26px; }
.cc-section { margin-bottom: 24px; }
.cc-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.cc-sem { font-family: var(--ff-display); font-size: 1.25rem; font-weight: 700; letter-spacing: var(--head-ls); }
.cc-sem .spring { color: var(--muted); font-weight: 500; }
.cc-totals { margin-left: auto; display: flex; gap: 16px; }
.cc-totals div { text-align: right; }
.cc-totals b { display: block; font-size: 1.1rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; font-family: var(--ff-display); }
.cc-totals span { font-size: .58rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 13px; }
.cc-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 13px 15px 14px 17px; cursor: pointer; box-shadow: var(--shadow-1); transition: box-shadow .14s, border-color .14s, transform .14s; animation: nodeIn .24s ease both; }
.cc-card:hover { box-shadow: var(--shadow-2); border-color: var(--line-2); transform: translateY(-2px); }
.cc-accent { position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; background: var(--brand); border-radius: 3px; }
.cc-card.ea .cc-accent { background: var(--yellow-deep); }
.cc-name { font-family: var(--ff-display); font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: -.006em; padding-right: 22px; }
.cc-okt { margin-top: 6px; font-size: .82rem; font-weight: 500; color: var(--ink); }
.cc-okt::before { content: '- '; color: var(--muted); }
.cc-okt.none { color: var(--muted); }
.cc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.cc-tag { font-size: .62rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; background: var(--paper-2); color: var(--ink-2); }
.cc-tag.ea { background: color-mix(in srgb, var(--yellow) 40%, var(--paper-2)); color: #6b5a16; }
.cc-h { font-family: var(--ff-mono); font-size: .74rem; color: var(--ink-2); }
.cc-kr { margin-left: auto; font-family: var(--ff-mono); font-size: .86rem; font-weight: 500; }
.cc-spec { font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-text); }
.cc-desc { margin-top: 9px; font-size: .8rem; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cc-edit { position: absolute; top: 9px; right: 9px; width: 26px; height: 26px; border: 1px solid var(--line); background: var(--card); border-radius: 6px; cursor: pointer; font-size: .74rem; display: none; }
.cc-card:hover .cc-edit { display: block; }
.cc-kws { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.cc-kw { font-size: .64rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--brand-100); color: var(--brand-text); }
.cc-cats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.cc-cat { font-family: var(--ff); font-size: .58rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; background: transparent; color: var(--ink-2); border: 1px solid var(--line-2); cursor: pointer; }
.cc-cat:hover { border-color: var(--brand); color: var(--brand-text); }
.cc-foot { display: flex; align-items: center; gap: 9px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.cc-soft { min-width: 0; font-family: var(--ff-mono); font-size: .67rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-pdf { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; letter-spacing: .02em; color: var(--brand-text); text-decoration: none; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line)); border-radius: 8px; }
.cc-pdf:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.cc-empty { border: 1px dashed var(--line-2); border-radius: var(--r-card); padding: 20px; display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--muted); }
.cc-empty span { font-weight: 500; }
.cc-empty button { font-family: var(--ff); font-size: .8rem; font-weight: 600; color: var(--brand-text); background: var(--brand-100); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.cc-empty button:hover { background: var(--brand); color: #fff; }
.cc-instr { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: -2px 0 14px; }
.cc-instr-h { font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.cc-grp { font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin: 16px 0 9px; display: flex; align-items: center; gap: 8px; }
.cc-grp::before { content: ''; width: 9px; height: 9px; border-radius: 3px; background: var(--g0); }
.cc-grp.g0 { color: var(--g0); }
.cc-grp.g1 { color: var(--g1); } .cc-grp.g1::before { background: var(--g1); }
.cc-grp.g2 { color: var(--g2); } .cc-grp.g2::before { background: var(--g2); }
.cc-grp.g3 { color: color-mix(in srgb, var(--g3) 80%, var(--ink)); } .cc-grp.g3::before { background: var(--g3); }

/* ============================================================
   Details drawer + modal
   ============================================================ */
/* a részletező is jobbról csúszik be, a háttér-sötétítés finoman úszik elő - a szerkesztő (.modal) ugyanígy */
.drawer-scrim { position: fixed; inset: 0; background: rgba(21, 23, 26, .3); z-index: 70; animation: scrimIn .22s ease both; }
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
.drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(760px, 94vw); background: var(--paper); border-left: 1px solid var(--line); box-shadow: -16px 0 50px rgba(16, 17, 20, .14); z-index: 75; display: flex; flex-direction: column; overflow: hidden; animation: modalIn .26s cubic-bezier(.2, .8, .25, 1) both; }
.dr-top { flex: none; position: relative; padding: 14px 18px 11px; background: var(--card); border-bottom: 1px solid var(--line); }
.dr-scroll { flex: 1 1 auto; overflow-y: auto; padding: 14px 18px 12px; }
.dr-foot { flex: none; display: flex; gap: 8px; justify-content: flex-end; padding: 10px 18px 12px; border-top: 1px solid var(--line); background: var(--card); }
.dr-foot .btn { flex: 0 0 auto; }
/* Szerkesztes + Bezaras egy sorban a reszletezo tetejen (viewer modban csak a Bezaras latszik) -
   a gombok a tartalmukhoz mereteznek, nem nyulnak teljes szelesre */
/* A részletező fejléc gombjai HÁROM szinten (korábban 9 egyforma gomb volt egy kupacban):
   1) állapot-váltás teljes szélességben, 2) eszközök kisebb chipként, 3) a törlés a lap
   alján, veszélyzónában. A Szerkesztés/Bezárás csak a fix láblécben él. */
.dr-actrow { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.dr-act-main { display: flex; gap: 8px; }
/* flex-basis: auto (nem 0), hogy a hosszabb felirat (pl. „Folyamatban") arányosan szélesebb
   gombot kapjon, ne szoruljon be az egyenlő harmadba - a sor így is teljes szélességű marad */
.dr-act-main .btn { flex: 1 1 auto; min-width: 0; justify-content: center; text-align: center; }
.dr-act-tools { display: flex; flex-wrap: wrap; gap: 6px; }
/* prioritás-sor a részletezőben: kompakt chipek, az aktív kiemelve (is-on) */
.dr-act-prio { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dr-act-prio-l { flex: none; font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.dr-act-prio .btn { flex: 0 0 auto; font-size: .74rem; padding: 5px 10px; font-weight: 600; }
.dr-act-tools .btn { flex: 0 0 auto; font-size: .74rem; padding: 5px 10px; font-weight: 600; }
/* feladatkártya-lapozás a részletezőben (swipe + ‹ n/összes › ) */
.dr-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.dr-nav-b { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.dr-nav-b:hover:not(:disabled) { border-color: var(--line-2); }
.dr-nav-b:disabled { opacity: .3; cursor: default; }
.dr-nav-c { font-size: .74rem; font-weight: 700; color: var(--ink-2); }
.dr-nav-hint { font-size: .68rem; color: var(--muted); margin-left: auto; }
/* FELELŐS-sor a részletezőben + felelős-szűrő sáv a listák fejlécében (2026-08-09) */
.dr-owner { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px; font-size: .8rem; }
.dr-owner-l { flex: none; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); padding-top: 7px; }
/* a felelős-sor KOMPAKT: kisebb chip és gomb, hogy egy sorban elférjen a cím alatt */
.dr-owner .nm-topicon { font-size: .78rem; padding: 5px 10px; border-width: 1px; }
.dr-owner .btn, .dr-owner .fp-btn { font-size: .74rem; padding: 5px 9px; }
.dr-owner .nm-topicactive, .dr-owner .cardpick { min-width: 0; flex: 1 1 240px; }
.ag-felelosbar { margin: 2px 0 10px; }
.ag-felelosbar .nm-topicactive, .ag-felelosbar .cardpick { max-width: 560px; }
.fp-wrap { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1 1 240px; }
.fp-wrap .cardpick { min-width: 0; flex: 1 1 220px; }
/* a kiválasztott felelős neve maga is gomb: koppintásra egyből a választó nyílik */
.fp-name { cursor: pointer; text-align: left; font-family: var(--ff); color: var(--ink); text-decoration: underline dotted; text-underline-offset: 3px; }
.fp-name:hover { background: color-mix(in srgb, var(--brand) 16%, var(--card)); }
/* sorszám-ugró mező: beírt szám + Enter = az adott sorszámú kártya (feladatnál és eseménynél is) */
.dr-nav-jump { width: 64px; height: 32px; flex: none; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font-family: var(--ff); font-size: .78rem; font-weight: 700; text-align: center; }
.dr-nav-jump:focus { outline: none; border-color: var(--brand); }
.dr-nav-jump::placeholder { color: var(--muted); font-weight: 500; }
/* veszélyzóna a részletező alján */
.dr-danger { margin-top: 22px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--hot) 35%, var(--line)); display: flex; justify-content: flex-start; }
.dr-edit-top { margin-top: 0; }
/* a sarki ✕ megszűnt - a bezárás egységesen a feliratos "✕ Bezárás" gomb (felül + alul) */
.dr-eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-text); }
.dr-name { margin: 5px 0 0; font-family: var(--ff-display); font-size: 1.35rem; font-weight: 700; line-height: 1.15; letter-spacing: var(--head-ls); }
/* MOBIL-KOMPAKT RÉSZLETEZŐ (2026-08-09, user-kérés): a kártya-részletező betűi egy fokkal
   kisebbek, hogy több férjen a képernyőre és könnyebb legyen átlátni - csak mobilon.
   A koppintó-célpontok mérete marad ujjbarát (gomb-padding alig csökken). */
@media (max-width: 720px) {
  .drawer { font-size: .95rem; width: 100vw; }
  .drawer .dr-top { padding: 10px 12px 8px; }
  .drawer .dr-scroll { padding: 10px 12px; }
  .drawer .dr-name { font-size: 1.14rem; }
  .drawer .dr-eyebrow { font-size: .62rem; }
  .drawer .dr-nav { gap: 6px; margin-bottom: 6px; }
  .drawer .dr-nav-hint { display: none; } /* a swipe működik - a felirat csak helyet vitt */
  .drawer .dr-owner { font-size: .76rem; margin: 2px 0 6px; }
  .drawer .dr-owner-l { font-size: .66rem; }
  .drawer .dr-actrow { margin-top: 8px; gap: 6px; }
  .drawer .dr-act-tools .btn { font-size: .72rem; padding: 5px 9px; }
  .drawer .dr-field { margin-bottom: 10px; }
  .drawer .dr-sec { margin: 12px 0 6px; }
  .drawer .dr-person { padding: 8px 10px; }
  .drawer .btn { font-size: .84rem; }
  .drawer .nm-topicon { font-size: .8rem; }
  .drawer .nm-topichit { font-size: .8rem; }
}
.dr-spec { margin-top: 6px; display: inline-block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--brand-text); background: var(--brand-100); padding: 3px 8px; border-radius: 6px; }
.dr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 16px 0; }
.dr-stats div { background: var(--card); padding: 10px 11px; }
.dr-stats b { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1; font-family: var(--ff-display); }
.dr-stats span { font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: 4px; display: block; }
.dr-field { margin-bottom: 14px; }
.dr-field h4 { margin: 0 0 3px; font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dr-field p { margin: 0; font-size: .9rem; line-height: 1.45; }
.dr-field p.none { color: var(--muted); font-style: italic; }
/* RichSzoveg: a kártya-összefoglaló megőrzött sortörésekkel, listával, kiemeléssel */
/* ÖSSZEFOGLALÓ-MEGJELENÍTÉS (RichSzoveg). 2026-08-10 (user-kérés: "olvashatatlan"):
   a lib/osszefoglalo blokkokra tagolja a szöveget, itt kap ikont, színt, dátum-csipet.
   SZÍN-SZABÁLY: szürke az alap, piros CSAK a 'figyelem' blokkra - a többi típust a
   halvány bal szegély és az ikon különbözteti meg, nem harsány szín. */
.richszoveg { font-size: .9rem; line-height: 1.5; }
.richszoveg p { margin: 0 0 .45em; }
.richszoveg p:last-child { margin-bottom: 0; }
.richszoveg ul, .richszoveg ol { margin: .2em 0 .5em; padding-left: 1.3em; }
.richszoveg li { margin: 0 0 .22em; }
.richszoveg .rsz-gap { height: .4em; }

/* ADAT-RÁCS: `mező: érték` sorok (névjegy, belépő, bármilyen kulcs-érték felsorolás).
   2026-08-22, user-hiba: „átláthatatlan a design, legyen már szín, struktúra, tagoltság,
   nem kell ekkora sortávolság" - a névjegy-válasz addig 7 külön bekezdés volt, egyenként
   .45em térközzel és 1.55-ös sorközzel, tehát fél képernyőt elfoglalt tagolás nélkül.
   Két oszlop: a KULCS halk és kicsi (nem az a lényeg), az ÉRTÉK olvasható és kiemelt.
   A sorok között hajszálvonal - ez adja a tagoltságot szín-tobzódás nélkül. */
/* ADATLAP-KÁRTYA (2026-08-22, második kör - user: „a válaszok vizuálisan nagyon rondák").
   Négy dolog változott az első körhöz képest, mind a képernyőn mérve:
    1. A NÉV BEKERÜLT A KÁRTYÁBA fejlécként - addig fölötte lebegett, elszakadva attól,
       amihez tartozik. A fejléc és a rács EGY doboz: közös alap, közös jelzősáv.
    2. KÉT OSZLOP mobilon is (a kulcs 72px): az egymás alá tördelt kulcs-érték pár
       KÉTSZERESÉRE nyújtotta a kártyát, egy névjegy elfoglalta a fél képernyőt.
    3. A CÍMKE HALKABB az adatnál (.62rem, 600, --muted): addig nagybetűs+800-as volt,
       tehát hangsúlyosabb, mint maga az érték - fordítva volt, mint kellett volna.
    4. KEVESEBB VONAL: a soronkénti hajszálvonal táblázatos zajt adott; most a térköz
       tagol, vonal csak a kontakt-blokk (e-mail/telefon) ALATT van, egy darab. */
.richszoveg p:has(+ .rsz-adatok) {
  margin: .4em 0 0; padding: var(--sp3) var(--sp3) var(--sp1);
  background: var(--paper-2); border-left: 3px solid var(--brand); border-radius: 8px 8px 0 0;
  font-size: .96rem; font-weight: 700; line-height: 1.3; color: var(--ink);
}
.rsz-adatok {
  margin: 0 0 .5em; display: flex; flex-direction: column;
  background: var(--paper-2); border-left: 3px solid var(--brand);
  border-radius: 0 0 8px 8px; padding: var(--sp1) var(--sp3) var(--sp3);
}
.rsz-adat {
  display: grid; grid-template-columns: 72px 1fr; gap: 0 var(--sp2);
  align-items: baseline; padding: 2px 0;
}
/* Mezőnév nélküli sor (a névjegyen a „BA"): az üres címke-hasáb MEGMARAD, hogy az érték
   a többivel EGY VONALBAN kezdődjön - teljes szélességre engedve kilógott a rendből. */
.rsz-adat--nevtelen dt { visibility: hidden; }
.rsz-adatok dt {
  font-size: .62rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); line-height: 1.9; overflow-wrap: anywhere;
}
.rsz-adatok dd { margin: 0; font-size: .84rem; font-weight: 600; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
/* a KONTAKT-adatok (e-mail, telefon) a kártya eleje - egy vonal zárja őket a többitől */
.rsz-adat:nth-child(2) { border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 4px; }
/* nagyon szűk kijelzőn a hosszú érték kaphat teljes sort - de csak 340px alatt */
@media (max-width: 340px) {
  .rsz-adat { grid-template-columns: 1fr; }
  .rsz-adatok dt { line-height: 1.4; }
}
.rsz-alap + .rsz-blokk { margin-top: 10px; }
.rsz-blokk { border-left: 3px solid var(--line-2); background: var(--paper-2); border-radius: 0 9px 9px 0; padding: 7px 11px; margin: 0 0 7px; }
.rsz-blokk:last-child { margin-bottom: 0; }
.rsz-fej { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 3px; }
.rsz-ikon { font-size: .82rem; line-height: 1; }
.rsz-cim { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.rsz-datum { font-size: .68rem; font-weight: 700; color: #fff; background: var(--brand); border-radius: 999px; padding: 1px 8px; }
.rsz-meta { font-size: .7rem; color: var(--muted); }
.rsz-torzs { font-size: .86rem; color: var(--ink-2); }
.rsz-torzs p:last-child { margin-bottom: 0; }
/* típus-jelölés: bal szegély + a dátum-csip színe */
.rsz-blokk--frissites { border-left-color: var(--brand); }
.rsz-blokk--szal { border-left-color: var(--g1); }
.rsz-blokk--szal .rsz-datum { background: var(--g1); }
.rsz-blokk--forras { border-left-color: var(--muted); background: transparent; padding-top: 2px; padding-bottom: 2px; }
.rsz-blokk--forras .rsz-torzs { font-size: .78rem; color: var(--muted); }
.rsz-blokk--kapcsolat { border-left-color: var(--track); }
.rsz-blokk--kapcsolat .rsz-datum { background: var(--track); }
.rsz-blokk--figyelem { border-left-color: var(--hot); background: var(--hot-100); }
.rsz-blokk--figyelem .rsz-cim { color: var(--hot); }
.rsz-blokk--figyelem .rsz-datum { background: var(--hot); }
.dr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-chip { font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--brand-100); color: var(--brand-text); }
.dr-chip.sw { font-family: var(--ff-mono); font-weight: 500; background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line); }
.dr-cats { margin: 8px 0 2px; }
.dr-chip.cat { font-family: var(--ff); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; border-radius: 5px; background: transparent; color: var(--ink-2); border: 1px solid var(--line-2); cursor: pointer; }
.dr-chip.cat:hover { border-color: var(--brand); color: var(--brand-text); }
.dr-chip.cat.is-on { background: var(--hot); border-color: var(--hot); color: #fff; }
.cat-picker { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.dr-pdf { display: flex; width: 100%; justify-content: center; text-align: center; margin-bottom: 10px; text-decoration: none; border-color: color-mix(in srgb, var(--brand) 32%, var(--line)); color: var(--brand-text); font-weight: 600; }
.dr-pdf:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.dr-edit { margin: 0; }

/* MINDEN szerkesztő JOBB OLDALI, teljes magasságú panelként nyílik - ugyanaz a
   design, mint a részletező drawer (felhasználói kérés: egységes, széles oldalpanel) */
.ovl { position: fixed; inset: 0; background: rgba(21, 23, 26, .46); backdrop-filter: blur(3px); display: flex; z-index: 80; align-items: stretch; justify-content: flex-end; padding: 0; animation: scrimIn .22s ease both; }
.modal { background: var(--card); border: 0; border-left: 1px solid var(--line); border-radius: 0; width: min(760px, 94vw); height: 100dvh; max-height: 100dvh; overflow: hidden; display: flex; flex-direction: column; box-shadow: -16px 0 50px rgba(16, 17, 20, .22); animation: modalIn .24s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes modalIn { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal h3 { flex: none; margin: 0; padding: 19px 24px 15px; font-family: var(--ff-display); font-size: 1.2rem; font-weight: 700; letter-spacing: var(--head-ls); border-bottom: 1px solid var(--line); position: relative; }
.modal h3::after { content: ''; position: absolute; left: 24px; bottom: -1.5px; width: 46px; height: 3px; border-radius: 2px; background: var(--brand); }
/* a szerkesztett tárgy neve piros (brand) hátterű jelvényben a modál-cím elején */
.mh-name { display: inline-block; margin-right: 10px; padding: 2px 11px; border-radius: 9px; background: var(--brand); color: #fff; max-width: 100%; overflow-wrap: anywhere; }
/* a törzs görget, a fejléc és a lábléc rögzített marad - a Mentés mindig elérhető görgetés nélkül */
.modal > .f, .modal > .pm-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; overscroll-behavior: contain; }
/* automatikusan növő textarea: nincs belső görgetés, csak a modál törzse görget */
/* a tartalom-mezők mindenhol kapjanak rendes helyet - üresen is legalább ~7 sornyit */
.ta-grow { overflow: hidden; resize: none; min-height: 160px; }
.f { padding: 18px 24px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px 16px; }
/* KRITIKUS: a grid-cellák tudjanak összemenni - enélkül a hosszú select kitolja a modalt (vízszintes scroll) */
.f > * { min-width: 0; }
/* színkódolt szekciófejek - markánsan elválnak, mobilon is jól látszik, hol tartunk */
.f-sec { --sec-c: var(--brand); grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: color-mix(in srgb, var(--sec-c) 70%, var(--ink)); margin: 18px -10px 0; padding: 10px 12px; border-radius: 9px; background: color-mix(in srgb, var(--sec-c) 14%, transparent); border-left: 4px solid var(--sec-c); }
.f-sec::before { content: ''; width: 9px; height: 9px; border-radius: 3px; background: var(--sec-c); flex: none; }
.f-sec:first-child { margin-top: 0; }
.f-sec.c-yellow { --sec-c: var(--yellow-deep); }
.f-sec.c-blue { --sec-c: var(--g1); }
.f-sec.c-green { --sec-c: var(--g0); }
.f-sec.c-purple { --sec-c: var(--g2); }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); line-height: 1.4; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font-size: .9rem; font-family: var(--ff); color: var(--ink); background: var(--paper); resize: vertical; transition: border-color .12s, background .12s; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-2); }
.field textarea { min-height: 160px; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: 1px; border-color: var(--brand); background: var(--card); }
/* chip-választó (állapot / prioritás / kategória) - ujjbarát, színnel beszél */
.chipradio { display: flex; flex-wrap: wrap; gap: 6px; }
.crx { font-family: var(--ff); font-size: .78rem; font-weight: 600; padding: 8px 13px; border-radius: 11px; cursor: pointer; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); transition: all .12s; }
.crx:hover { border-color: var(--line-2); color: var(--ink); }
.crx.is-on { --cr-c: var(--hot); background: var(--cr-c); border-color: var(--cr-c); color: #fff; font-weight: 700; box-shadow: 0 3px 10px color-mix(in srgb, var(--cr-c) 35%, transparent); }
.crx.c-blue.is-on { --cr-c: var(--g1); }
.crx.c-green.is-on { --cr-c: var(--g0); }
.crx.c-amber.is-on { --cr-c: var(--yellow-deep); color: #241c05; }
.crx.c-grey.is-on { --cr-c: var(--g3); }
.mfoot { flex: none; display: flex; gap: 8px; padding: 13px 24px 17px; align-items: center; border-top: 1px solid var(--line); background: var(--card); }
.mfoot .sp { margin-left: auto; }
.mfoot .btn--ink { padding: 10px 18px; }

/* ---- szerkesztő-modál: állandó összegző sor + színes fülek (Feladat/Esemény) ---- */
/* fix magasság: fülváltáskor a modál NEM ugrál, a gombok mindig ugyanott vannak,
   a tartalom belül görget; az utolsó mező alatt bő térköz, hogy semmi ne lógjon ki */
.modal--tabs { height: 100dvh; }
.modal--tabs .f { padding-bottom: 34px; align-content: start; }
.mt-sum { flex: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 24px 2px; }
.mt-chip { font-family: var(--ff); font-size: .72rem; font-weight: 650; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; cursor: pointer; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-chip:hover { border-color: var(--line-2); color: var(--ink); }
.mt-chip.mt-warn { color: color-mix(in srgb, var(--yellow-deep) 75%, var(--ink)); border-color: color-mix(in srgb, var(--yellow-deep) 45%, transparent); background: color-mix(in srgb, var(--yellow-deep) 12%, transparent); }
.mt-tabs { flex: none; display: flex; gap: 4px; padding: 8px 20px 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.mt-tabs::-webkit-scrollbar { display: none; }
.mt-tab { --sec-c: var(--brand); flex: none; display: inline-flex; align-items: center; gap: 7px; font-family: var(--ff); font-size: .8rem; font-weight: 700; color: var(--ink-2); background: transparent; border: 1px solid transparent; border-bottom: none; border-radius: 10px 10px 0 0; padding: 8px 13px 9px; cursor: pointer; white-space: nowrap; }
.mt-tab .n { width: 17px; height: 17px; border-radius: 6px; display: grid; place-items: center; font-size: .64rem; font-weight: 800; background: color-mix(in srgb, var(--sec-c) 16%, transparent); color: color-mix(in srgb, var(--sec-c) 72%, var(--ink)); }
.mt-tab:hover { color: var(--ink); background: var(--paper-2); }
.mt-tab.is-on { color: color-mix(in srgb, var(--sec-c) 70%, var(--ink)); background: color-mix(in srgb, var(--sec-c) 12%, transparent); border-color: color-mix(in srgb, var(--sec-c) 32%, var(--line)); box-shadow: inset 0 -3px 0 var(--sec-c); }
.mt-tab.is-on .n { background: var(--sec-c); color: #fff; }
/* EGY NYELV a szerkesztőben (2026-07-25): a fülek/chipek/szekciófejek korábban négy külön
   színt vittek (sárga/kék/zöld/lila), amitől a felület tarka és nehezen olvasható volt.
   Mostantól a STRUKTÚRA szürke, és a PIROS kizárólag az aktív elemet jelöli - így a szín
   információt hordoz, nem dekoráció. (A c-* osztályok maradnak, csak semlegesítve.) */
.mt-tab.c-yellow, .mt-tab.c-blue, .mt-tab.c-green, .mt-tab.c-purple { --sec-c: var(--brand); }
.mt-tab.is-on { --sec-c: var(--hot); }
.f-sec.c-yellow, .f-sec.c-blue, .f-sec.c-green, .f-sec.c-purple { --sec-c: var(--brand); }
.crx.c-blue.is-on, .crx.c-green.is-on, .crx.c-grey.is-on { --cr-c: var(--hot); }
.crx.c-amber.is-on { --cr-c: var(--hot); color: #fff; }

/* alfeladat-szerkesztő (Feladat modál, Alfeladatok fül) */
.se-wrap { display: flex; flex-direction: column; gap: 7px; }
.se-empty { font-size: .8rem; color: var(--muted); padding: 4px 2px; }
.se-row { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 6px 8px; }
.se-row.is-done { opacity: .62; }
.se-row.is-done .se-text { text-decoration: line-through; }
.se-main { display: flex; gap: 6px; align-items: flex-start; }
.se-check { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
/* a szöveg auto-növő textarea: hosszú alfeladat TÖRDEL, nem vágódik el */
/* min-height: 0 KELL - a .ta-grow és a .field textarea 160px-es alapmagassága különben
   üres teret nyitna minden alfeladat alatt (a magasságot a GrowArea méri a tartalomhoz) */
.field .se-text { flex: 1 1 auto; min-width: 0; width: auto; min-height: 0; border: none; background: transparent; border-radius: 0; padding: 3px 2px; font-size: .86rem; line-height: 1.45; resize: none; overflow: hidden; }
.field .se-text:focus { outline: none; box-shadow: inset 0 -1.5px 0 var(--brand); background: transparent; }
/* a sor gombjai EGY csoportban - sosem törnek szét külön sorokba */
.se-acts { display: flex; align-items: center; gap: 5px; flex: none; margin-left: auto; }
.se-btn { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); color: var(--ink-2); font-size: .74rem; cursor: pointer; padding: 0; }
.se-btn:hover { border-color: var(--line-2); color: var(--ink); }
.se-btn:disabled { opacity: .35; cursor: default; }
.se-btn.is-on { background: var(--g1); border-color: var(--g1); color: #fff; }
.se-btn.se-del:hover { background: #c0392b; border-color: #c0392b; color: #fff; }
.se-meta { flex: none; font-size: .68rem; font-weight: 650; color: var(--ink-2); background: color-mix(in srgb, var(--g1) 12%, transparent); border: 1px solid color-mix(in srgb, var(--g1) 25%, transparent); border-radius: 999px; padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.se-det { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 7px; padding-top: 8px; border-top: 1px dashed var(--line); }
.se-det .fld { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; }
.se-det .se-teamfld { flex: 1 1 100%; }
.se-team { display: flex; flex-wrap: wrap; gap: 6px; }
.se-add { display: flex; gap: 7px; margin-top: 2px; }
.se-add input { flex: 1 1 auto; }
.se-add .btn { flex: none; }

/* kapcsolt feladatok listája (Esemény modál, Feladatok fül) */
.mt-tasklist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.mt-task { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 8px 11px; cursor: pointer; font-family: var(--ff); }
.mt-task:hover { border-color: var(--line-2); background: var(--paper-2); }
.mt-task:disabled { cursor: default; }
.mt-task .t { font-size: .86rem; font-weight: 700; color: var(--ink); }
.mt-task .m { font-size: .7rem; color: var(--muted); }
.mt-tst { flex: none; font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 6px; padding: 2px 7px; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-2); }
.mt-tst.st-doing { background: color-mix(in srgb, var(--g1) 15%, transparent); border-color: color-mix(in srgb, var(--g1) 35%, transparent); color: color-mix(in srgb, var(--g1) 75%, var(--ink)); }
.mt-tst.st-done { background: color-mix(in srgb, var(--g0) 15%, transparent); border-color: color-mix(in srgb, var(--g0) 35%, transparent); color: color-mix(in srgb, var(--g0) 75%, var(--ink)); }

/* kapcsolt levelek (Levelezés fül + a levélíró mentett-levél listája) */
.mt-letters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.mt-letter { display: flex; gap: 6px; align-items: center; }
.mt-letter-open { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 7px 11px; cursor: pointer; font-family: var(--ff); }
.mt-letter-open:hover { border-color: var(--line-2); background: var(--paper-2); }
.mt-letter-open .s { font-size: .84rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-letter-open .d { font-size: .68rem; color: var(--muted); }
.mt-lst { flex: none; font-family: var(--ff); font-size: .66rem; font-weight: 800; letter-spacing: .04em; border-radius: 999px; padding: 5px 10px; cursor: pointer; border: 1px solid; white-space: nowrap; }
.mt-lst.draft { background: color-mix(in srgb, var(--yellow-deep) 14%, transparent); border-color: color-mix(in srgb, var(--yellow-deep) 40%, transparent); color: color-mix(in srgb, var(--yellow-deep) 72%, var(--ink)); }
.mt-lst.sent { background: color-mix(in srgb, var(--g0) 14%, transparent); border-color: color-mix(in srgb, var(--g0) 40%, transparent); color: color-mix(in srgb, var(--g0) 75%, var(--ink)); }
.mt-sublabel { display: block; margin-top: 10px; }
/* rövid magyarázó sor a levél-gombok alatt: mit csinál (és mit NEM) a gomb */
.mt-hint { margin: 8px 0 0; font-size: .76rem; line-height: 1.45; color: var(--muted); }

/* ✉ levél-jelzés a feladat- és esemény-kártyákon */
.ag-mailsum { font-family: var(--ff); font-size: .68rem; font-weight: 750; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; cursor: pointer; position: relative; }
.ag-mailsum:hover { border-color: var(--line-2); color: var(--ink); }
.ag-mailsum.has-draft::after { content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow-deep); border: 1.5px solid var(--card); }
.viewer .ag-mailsum { pointer-events: none; }

/* mobil: nagyobb alapbetű - a rem-alapú méretek (kártyák, listák, űrlapok) együtt nőnek */
@media (max-width: 720px) {
  html { font-size: calc(19px * var(--md-fskala, 1)); }
}

/* mobil: teljes képernyős szerkesztő (Material full-screen dialog minta) -
   nincs elsötétített háttér-sáv, a teljes magasság az űrlapé; a fejléc és a
   Mentés-sáv rögzített, csak a törzs görget */
@media (max-width: 720px) {
  .ovl { padding: 0; align-items: stretch; }
  .modal, .modal.modal--wide { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; animation: sheetUp .26s cubic-bezier(.2, .8, .25, 1) both; }
  @keyframes sheetUp { from { transform: translateY(36px); opacity: .5; } to { transform: none; opacity: 1; } }
  /* a cím mobilon EGY kompakt sor (ellipszissel): billentyűzet mellett is maradjon hely a tartalomnak */
  /* a rögzített keret (cím + összegző + fülsor + mentés-sáv) a képernyő tetemes részét vitte:
     minden szegélyt szorosabbra húzunk, hogy a TARTALOMNAK jusson a hely */
  .modal h3 { padding: 7px 14px 6px; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .modal h3::after { left: 18px; }
  /* gépelés közben (fókuszban lévő mező = nyitott billentyűzet) a rátapadó sávok elengednek,
     hogy a szűk látótér a szerkesztett tartalomé legyen */
  .nm-body:has(input:focus, textarea:focus) .nm-copyrow.big { position: static; box-shadow: none; padding: 10px 0 0; }
  .modal:has(input:focus, textarea:focus) .mfoot { display: none; }
  .f { grid-template-columns: 1fr; padding: 14px 18px 12px; gap: 14px; }
  .f-sec { margin-left: -6px; margin-right: -6px; }
  .field input, .field select, .field textarea { font-size: max(16px, calc(16px * var(--md-fskala, 1))); padding: 11px 13px; }
  /* összegző sor + fülsor mobilon: kompakt, a fülsor vízszintesen görgethető */
  /* az összegző chipek EGY sorban, vízszintesen görgethetően (két sorba tördelve
     a rögzített keret harmadát vitték el a tartalom elől) */
  .mt-sum { padding: 5px 14px 0; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mt-sum::-webkit-scrollbar { display: none; }
  .mt-chip { flex: none; max-width: 46vw; padding: 3px 9px; font-size: .68rem; }
  .mt-tabs { padding: 4px 10px 0; }
  .mt-tab { padding: 7px 11px 8px; font-size: .8rem; }
  /* mobilon a fülsor ALUL van, a hüvelykujj-zónában (a mentés-sáv felett):
     nem kell átnyúlni a képernyőn, a tartalom felül görget */
  .modal--tabs form.f, .modal--tabs > .pm-body { order: 1; }
  .modal--tabs .mt-tabs { order: 2; border-top: 1px solid var(--line); border-bottom: none; padding: 5px 10px 4px; background: var(--card); }
  .modal--tabs .mt-tab { border-radius: 0 0 10px 10px; }
  .modal--tabs .mt-tab.is-on { box-shadow: inset 0 3px 0 var(--sec-c); }
  .modal--tabs .mfoot { order: 3; }
  /* alfeladat-sor mobilon RÁCSBAN: 1. sor = pipa + (tördelő) szöveg, 2. sor = a gombsor
     jobbra igazítva. Így egy alfeladat két tiszta sor, nem szétesett gomb-törmelék. */
  .se-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; }
  .field .se-text { font-size: max(16px, calc(16px * var(--md-fskala, 1))); padding: 2px 0; }
  .se-acts { grid-column: 2; margin-left: 0; flex-wrap: wrap; }
  /* a meta-chip balra marad, a műveleti gombok jobbra csúsznak */
  .se-acts .se-btn:first-of-type { margin-left: auto; }
  .se-btn { width: 34px; height: 34px; }
  .se-add { flex-wrap: wrap; }
  /* kompaktabb chipek: a szerkesztőben 4 chip-blokk van egymás alatt (állapot, prioritás,
     kiemelés, kategória) - a korábbi méret mellett ez több képernyőnyi görgetés volt */
  .crx { padding: 7px 12px; font-size: .8rem; }
  .field label { font-size: .6rem; }
  .mfoot { padding: 8px 14px calc(9px + env(safe-area-inset-bottom)); gap: 6px; }
  .mfoot .btn--ink { flex: 1 1 auto; text-align: center; padding: 10px 14px; font-size: .9rem; }
  .mfoot .btn { padding: 10px 12px; }
}

/* ============================================================
   DARK THEME
   ============================================================ */
html[data-theme='dark'] {
  --paper: #0e0f11; --paper-2: #191a1e; --card: #17181b;
  --ink: #f1f1ec; --ink-2: #a9aab0; --muted: #71737b;
  --line: rgba(255, 255, 255, .10); --line-2: rgba(255, 255, 255, .18);
  --brand: #8b95a3; --brand-text: #aab3bf; --brand-100: #24262a;
  --hot: #ff2d6f; --hot-100: #2c1622;
  --fwd: #7fa7ff; --fwd-100: #16233c;
  --en: #cf9a62; --en-100: #2b2119;   /* sötét témán világosabb barna, hogy olvasható maradjon */
  --g0: #35c98d; --g0-100: #11291f; --g1: #5b91f5; --g1-100: #131d31;
  --g2: #b083f5; --g2-100: #201833; --g3: #9aa0aa; --g3-100: #24262a;
  --track: #4cc4e0; --track-100: #12262c;
}
html[data-theme='dark'] body {
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(255, 45, 111, .10), transparent 60%),
    var(--paper);
}
html[data-theme='dark'] .masthead, html[data-theme='dark'] .toolbar { background: rgba(23, 24, 27, .9); backdrop-filter: blur(8px); }

/* sötét módban a sárga árnyalatú szövegek fehéren, hogy olvashatók legyenek */
html[data-theme='dark'] .cn-tag.ea, html[data-theme='dark'] .cc-tag.ea { color: #fff; }
html[data-theme='dark'] .ag-prio.normal { color: #fff; }
html[data-theme='dark'] .ag-grp.prio-normal { color: #fff; }
html[data-theme='dark'] .f-sec.c-yellow { color: #fff; }
html[data-theme='dark'] .cn-card:hover, html[data-theme='dark'] .cc-card:hover { box-shadow: 0 0 0 1px var(--line-2), 0 0 26px rgba(255, 45, 111, .18); }
html[data-theme='dark'] .react-flow__node.selected .cn-card, html[data-theme='dark'] .cn-card.hit { box-shadow: 0 0 0 2px var(--hot), 0 0 24px rgba(255, 45, 111, .3); }
html[data-theme='dark'] .prog-rail { box-shadow: 0 0 26px rgba(255, 45, 111, .22); }
html[data-theme='dark'] .react-flow__controls-button path { fill: var(--ink); }

/* ---- kategória-választó a kártyákon (+ gomb) ---- */
.cn-cat-add { min-width: 22px; font-weight: 800; border-style: dashed; color: var(--muted); }
.cn-cat-add:hover { border-style: solid; }
.catmenu-scrim { position: fixed; inset: 0; z-index: 84; background: transparent; }
.cat-menu { position: fixed; z-index: 85; width: 340px; max-width: calc(100vw - 16px); display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 18px 50px rgba(16, 17, 20, .26); }
.cat-menu-h { font-size: .74rem; font-weight: 700; color: var(--ink-2); }
.cat-menu-done { align-self: flex-end; }

/* ---- él-stílus menü (koppintás egy kézi összekötésre) ---- */
.edge-menu { position: fixed; z-index: 90; display: flex; flex-direction: column; gap: 7px; padding: 9px; background: var(--card); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 14px 40px rgba(16, 17, 20, .24); }
.em-row { display: flex; gap: 6px; align-items: center; }
.em-btn { display: grid; place-items: center; width: 44px; height: 34px; border: 1px solid var(--line); background: var(--paper-2); border-radius: 8px; cursor: pointer; padding: 0; }
.em-btn:hover { border-color: var(--line-2); }
.em-btn.on { border-color: var(--brand); background: var(--brand-100); }
.em-btn svg { display: block; }
.em-anim line { animation: emdash .5s linear infinite; }
@keyframes emdash { to { stroke-dashoffset: -12; } }
.em-del { flex: 1; font-family: var(--ff); font-size: .78rem; font-weight: 600; padding: 8px 10px; border-radius: 8px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line)); background: transparent; color: var(--brand-text); }
.em-del:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.em-x { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-2); border-radius: 8px; cursor: pointer; }

/* ---- elrendezés-zárolás (lakat) ---- */
.lockbtn.is-on { background: var(--hot); border-color: var(--hot); color: #fff; font-weight: 700; }
.mapwrap.locked .react-flow__handle.hdl { opacity: 0 !important; pointer-events: none !important; }
.mapwrap.locked .cn-card { cursor: pointer; }
/* terület-kijelölés mód: sima mutatóegér a kéz helyett, húzásra jelöl */
.selbtn.is-on { background: var(--hot); border-color: var(--hot); color: #fff; font-weight: 700; }
.mapwrap.selmode .react-flow__pane { cursor: default; }
/* a dekoratív zóna-hátterek és feliratok ne fogják el az egeret: a pásztázás/marquee a vásznon induljon */
.react-flow__node-frame, .react-flow__node-zonelabel { pointer-events: none !important; }

/* ÚJ feladat jelzése: villogó narancssárga címke a cím előtt (72 órán belül keletkezett) */
.ag-new { display: inline-block; margin-right: 7px; padding: 1.5px 8px; border-radius: 7px; background: #f5850c; color: #1a1206; font-size: .62rem; font-weight: 800; letter-spacing: .08em; vertical-align: 2px; animation: newBlink 1s ease-in-out infinite; }
@keyframes newBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ag-new { animation: none; } }
/* a kijelölt kártya jelzése: a vastag piros (brand) keret a kártyán (lásd .react-flow__node.selected
   .cn-card) - külön külső gyűrű nincs */
/* a ReactFlow beépített kijelölés-téglalapja ne adjon MÁSODIK keretet a kártyák köré */
.react-flow__nodesselection-rect { border: none !important; background: transparent !important; }
/* a húzás közbeni gumiszalag (marquee) viszont látsszon, brand színnel */
.react-flow__selection { border: 1.5px dashed color-mix(in srgb, var(--brand) 60%, transparent) !important; background: color-mix(in srgb, var(--brand) 7%, transparent) !important; }

/* ---- responsive ---- */
/* asztali nézeten a ☰ gomb rejtve, a wrapper láthatatlan (display: contents = a régi elrendezés változatlan) */
.tools-toggle { display: none; }
.toolbar-more { display: contents; }
.app-shell { height: 100dvh; }

@media (max-width: 720px) {
  .cc-totals { width: 100%; margin-left: 0; }

  /* fejléc: egyetlen kompakt sor */
  .masthead { padding: 8px 0; }
  .masthead .wrap { flex-wrap: nowrap; gap: 10px; }
  .kicker, .subtitle { display: none; }
  .brandmark { gap: 8px; }
  .brandmark .logo { height: 24px; }

  /* eszköztár: 1 kompakt sor + ☰ mögött lenyíló panel */
  .toolbar__inner { padding: 7px 0; gap: 6px 8px; }
  .viewtoggle button { padding: 5px 11px; font-size: .78rem; }
  .tools-toggle { display: inline-flex; margin-left: auto; min-width: 40px; justify-content: center; }
  .tools-toggle.has-f { border-color: var(--brand); color: var(--brand-text); font-weight: 700; }
  .toolbar-more { display: none; }
  /* a lenyíló panel vizuálisan elkülönül: saját kártya-háttér, keret, árnyék */
  .toolbar-more.open {
    display: flex; flex-wrap: wrap; gap: 9px; width: 100%;
    margin: 8px 0 5px; padding: 13px 12px;
    background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 14px;
    box-shadow: 0 10px 28px rgba(16, 17, 20, .13), inset 0 1px 0 rgba(255, 255, 255, .04);
  }
  /* (a keresőnek szóló szabály innen kivezetve 2026-08-10: a kereső a menü-sávba költözött,
     a panelben már nincs ilyen elem - a holt szabály csak félrevezetne) */
  .toolbar-more.open .presetsel, .toolbar-more.open .instrsel { flex: 1 1 44%; max-width: none; background: var(--card); }
  .toolbar-more.open .btn { background: var(--card); }
  .toolbar-more.open .chip { background: var(--card); }
  .toolbar-more.open .chip.is-on { background: var(--hot); }
  .toolbar-more.open .spacer { display: none; }
  .toolbar-more.open .filters { width: 100%; padding-top: 2px; border-top: 1px dashed var(--line); }
  .toolbar-more.open .themebtn { background: var(--card); }

  /* részletek panel teljes szélességben - plusz padding NINCS, a belső szekciók (dr-top/scroll/foot)
     hozzák a sajátjukat; a dupla margó tette régen aránytalanul üressé mobilon */
  .drawer { width: 100vw; padding: 0; }
  .f { grid-template-columns: 1fr; padding: 12px 14px 4px; }
  .field.full { grid-column: auto; }

  /* térkép-segédek kisebbre */
  .legend { max-width: calc(100vw - 24px); }
  .react-flow__minimap { display: none; }
}

/* ---- Feladatok + Események nézetek ---- */
.cat-block-head .ag-add { margin-left: auto; align-self: center; flex: none; }
/* Meet-időpont sor: a globális teljes-szélességű input-szabályt itt törjük meg, de a mezők
   FLEX-alapon méreteződnek (.ms-row / .ms-ido lent) - a fix 150/94px azért szűnt meg, mert
   390px-en levágta a natív time-mező tartalmát ("13:0(") és a kötőjeles "vége" mezőt egyedül
   tördelte a következő sorba. A `!important` csak a szélességre kell, a flexre nem. */
.ms-row input[type="date"] { width: auto !important; flex: 1 1 150px; min-width: 0; }
.ms-row input[type="time"] { width: auto !important; flex: 1 1 108px; min-width: 0; max-width: 170px; }
/* 📅 Időpont-modál: fül nélküli, a gombsor mindig elérhető (kijelző-biztonsági ráhagyással) */
.modal--idopont { height: 100dvh; }
.modal--idopont .mfoot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.ip-go { display: none; }
@media (max-width: 720px) {
  .ip-go { display: block; width: 100%; padding: 12px; font-size: 1rem; }
  /* a lábléc-magyarázat mobilon sok sorba törne és elenné a fél kijelzőt - rejtve,
     a lábléc egy gombsor marad, az űrlap végi .ip-go gomb szövege összegzi a kimenetet */
  .ip-note { display: none; }
}
/* Posta: Outlook-őrszem figyelmeztető sáv (a klasszikus Outlook nem fut) */
.po-oldown { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid var(--hot); border-left-width: 3px; border-radius: 8px; padding: 8px 12px; margin: 0 0 16px; font-size: .92rem; background: color-mix(in srgb, var(--hot) 6%, transparent); }
/* függő (még nem véglegesített) Meet-időpontjavaslat a naptárban: halvány, csíkozott */
.cal-bar.pending { opacity: .45; background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(255, 255, 255, .55) 3px 6px); }
/* slot-véglegesítő chipsor */
.slotconfirm { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; flex-basis: 100%; }
.slotconfirm .sc-h { font-size: .8rem; font-weight: 700; color: var(--ink-2); }
/* kapcsolt esemény kiemelt blokk a feladat-részletezőben + kattintható esemény-chip a kártyán */
.dr-evcard { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px; padding: 8px 10px; background: color-mix(in srgb, var(--brand) 5%, transparent); }
.dr-evcard-main { flex: 1 1 200px; min-width: 0; display: grid; gap: 2px; text-align: left; border: 0; background: transparent; cursor: pointer; font: inherit; color: var(--ink); }
.dr-evcard-main .t { font-weight: 700; }
.dr-evcard-main .m { font-size: .8rem; color: var(--muted); }
.agc-meta .evbtn { border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 8px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-2); cursor: pointer; font: inherit; font-size: .78rem; }
.agc-meta .evbtn:hover, .ag-toprow .evbtn:hover { border-color: var(--brand); color: var(--brand-text); }
.ag-toprow .evbtn { border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 8px; background: color-mix(in srgb, var(--ink) 6%, transparent); cursor: pointer; font: inherit; font-size: .74rem; color: var(--ink-2); flex: none; }
/* az Események fejléc-gombjai (Új esemény + Outlook + Gmail) egy jobbra igazított csoportban */
.cat-block-head .ag-actions { margin-left: 8px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; flex: none; }
@media (max-width: 720px) {
  .cat-block-head .ag-actions { width: 100%; margin-left: 0; }
}
/* 💁‍♀️ Titkárnő-sáv a postázó gombsora FELETT: saját, teljes szélességű blokk,
   mobilon sem nyomódik a gombok közé */
.nm-titkar { display: grid; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--brand) 4%, transparent); }
.nm-titkar textarea { width: 100%; font: inherit; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--line); resize: vertical; background: var(--card); color: var(--ink); }
/* A „Mit szeretnél?" mező GrowArea lett (a Kérdezőből átadott háttéranyag hosszú is lehet),
   a `.ta-grow` viszont 160px alapmagasságot hoz magával - üresen az itt túl nagy doboz.
   A magasságot a GrowArea méri (inline height), ezért a min-height itt 0.
   A mobil `.posta-hub .nm-titkar textarea` 84px-e ERŐSEBB szelektor, tehát ott érintetlen. */
.nm-titkar textarea.ta-grow { min-height: 0; }
.nm-titkar-q { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nm-titkar-q .q { font-weight: 700; }
.nm-titkar-q input { flex: 1 1 180px; font: inherit; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.nm-titkar-go { justify-self: end; }
@media (max-width: 720px) {
  .nm-titkar-go { justify-self: stretch; }
}
/* ITERATÍV JAVÍTÓ KÖR a levélíróban (2026-08-20): „Javítás diktálása" mező + Meghallgatás.
   A .nm-titkar sáv testvére, halványabb tónussal (a fő út a Titkárnő-gomb marad). A mező
   natív textarea-görgetése az egyetlen megengedett belső görgetés. */
.nm-fix { display: grid; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.nm-fix-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nm-fix-l { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.nm-fix-h .sp { flex: 1; }
.nm-fix textarea { width: 100%; font: inherit; font-size: .84rem; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--line); resize: vertical; background: var(--card); color: var(--ink); }
.nm-fix-go { justify-self: end; }
.nm-fix-play { flex: none; }
.nm-fix .btn { min-height: 40px; }
@media (max-width: 720px) {
  .nm-fix-go { justify-self: stretch; }
}
/* mobil lebegő + gomb (Feladatok/Események): a fejléc-gomb kicsi és lecsúszhat - ez mindig kéznél van;
   a mentés-dokk FAB-ja fölé kerül (az bottom 14px-en áll) */
.ag-fab { display: none; }
@media (max-width: 720px) {
  .ag-fab { display: flex; align-items: center; justify-content: center; position: fixed; right: 14px; bottom: calc(72px + env(safe-area-inset-bottom)); width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--ink); color: var(--paper, #fff); font-size: 1.8rem; font-weight: 700; z-index: 55; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); cursor: pointer; }
}
.viewer .ag-fab { display: none !important; }
/* Meet-sor az esemény-szerkesztőben (link + másolás gomb) */
.ev-meetrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
/* kézi ⭐ kapcsoló a kártyán és a Legfontosabbak sávban */
.ag-star { border: 0; background: transparent; cursor: pointer; font-size: .95rem; line-height: 1; padding: 2px 4px; opacity: .5; flex: none; }
.ag-star.is-on { opacity: 1; }
.ag-star:hover { opacity: 1; transform: scale(1.15); }
.ag-intro { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r-card); padding: 14px 16px; margin-bottom: 22px; max-width: 1020px; box-shadow: var(--shadow-1); }
.ag-intro p { margin: 0; font-size: .92rem; line-height: 1.58; color: var(--ink-2); white-space: pre-wrap; }
.ag-intro-edit { flex: none; margin-left: auto; }

.ag-grp::before { background: var(--brand); }
.ag-grp.st-todo { color: var(--brand-text); } .ag-grp.st-todo::before { background: var(--brand); }
.ag-grp.st-doing { color: var(--g1); } .ag-grp.st-doing::before { background: var(--g1); }
.ag-grp.st-done { color: var(--g0); } .ag-grp.st-done::before { background: var(--g0); }

.ag-card .cc-name { padding-right: 92px; }
.ag-card.st-doing .cc-accent { background: var(--g1); }
.ag-card.st-done .cc-accent { background: var(--g0); }
.ag-card.st-done { opacity: .68; }
.ag-status { position: absolute; top: 10px; right: 10px; font-family: var(--ff); font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.ag-status.st-todo { background: var(--brand-100); color: var(--brand-text); border-color: color-mix(in srgb, var(--brand) 28%, var(--line)); }
.ag-status.st-doing { background: color-mix(in srgb, var(--g1) 15%, var(--card)); color: var(--g1); border-color: color-mix(in srgb, var(--g1) 40%, var(--line)); }
.ag-status.st-done { background: color-mix(in srgb, var(--g0) 14%, var(--card)); color: var(--g0); border-color: color-mix(in srgb, var(--g0) 40%, var(--line)); }
.ag-status:hover { filter: brightness(.96); }

.ag-ideas { margin: 9px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ag-ideas li { font-size: .76rem; line-height: 1.42; color: var(--ink-2); padding-left: 13px; position: relative; }
.ag-ideas li::before { content: ''; position: absolute; left: 1px; top: .52em; width: 5px; height: 5px; border-radius: 2px; background: color-mix(in srgb, var(--brand) 55%, var(--line-2)); }
.ag-more { margin-top: 6px; font-size: .66rem; font-weight: 700; letter-spacing: .03em; color: var(--muted); }
/* pipálható alfeladatok a feladatkártyán */
.ag-steps li { display: flex; align-items: flex-start; gap: 7px; padding-left: 0; }
.ag-steps li::before { display: none; }
.ag-steps li.is-done .tx { text-decoration: line-through; color: var(--muted); }
.ag-scheck { flex: none; width: 16px; height: 16px; margin-top: 1px; border: 1.5px solid var(--line-2); border-radius: 5px; background: var(--card); cursor: pointer; display: grid; place-items: center; font-size: .58rem; font-weight: 900; color: #fff; line-height: 1; padding: 0; }
.ag-scheck:hover { border-color: var(--g0); }
.ag-scheck.is-on { background: var(--g0); border-color: var(--g0); }
.ag-steps .tx { flex: 1 1 auto; min-width: 0; }
.ag-smeta { flex: none; font-size: .64rem; font-weight: 650; color: var(--muted); white-space: nowrap; }
.ag-stepsum { font-size: .68rem; font-weight: 750; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.ag-stepsum.all-done { color: color-mix(in srgb, var(--g0) 80%, var(--ink)); background: color-mix(in srgb, var(--g0) 14%, transparent); border-color: color-mix(in srgb, var(--g0) 35%, transparent); }

/* ===== ESEMÉNYEK - LISTA NÉZET (2026-08-12 újratervezés, user: "rendezni kell,
   logikusabb, strukturáltabb") ==========================================================
   Eddig ~114 egyforma, teljes szélességű sor futott egymás alatt, a dátum a JOBB oldali
   meta-fürtben, soronként más x-en - a listát nem lehetett dátum szerint átfutni. Most:
   hónap-csoportok + FIX bal dátum-oszlop (nap · hét napja · óra), a múlt egyetlen csukott
   foldban, a dátum nélküliek külön blokkban a végén. A bal-oszlopos ritmus szándékosan
   ugyanaz, mint az Idővonalé. */
.ev-list { display: flex; flex-direction: column; gap: 22px; max-width: 1000px; }
.ev-mgroup { display: flex; flex-direction: column; gap: 2px; }
.ev-mh { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-family: var(--ff-display); font-size: .96rem; font-weight: 700; letter-spacing: var(--head-ls); color: var(--ink); }
.ev-mh em { font-family: var(--ff); font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

.ev-row { display: flex; gap: 14px; align-items: flex-start; padding: 8px 10px 8px 0; border-radius: 9px; cursor: pointer; transition: background .14s; }
.ev-row:hover { background: var(--paper-2); }
.ev-row + .ev-row { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
/* bal dátum-oszlop: FIX szélesség, jobbra zárt - ettől lesz a lista átfuthatóan igazított */
.ev-when { flex: none; width: 72px; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding-right: 13px; border-right: 2px solid var(--line); text-align: right; }
.ev-d { font-family: var(--ff-mono); font-size: 1.16rem; font-weight: 700; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.ev-d--fuzzy { color: var(--muted); }
.ev-wd { font-size: .6rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ev-h { font-family: var(--ff-mono); font-size: .7rem; font-weight: 600; color: var(--brand-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ev-title { font-size: .92rem; font-weight: 700; color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.ev-meta { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: .74rem; font-weight: 600; color: var(--ink-2); }
.ev-meta .m { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ev-meta .m.ok { color: var(--g0); }
.ev-meta .m.warn { color: color-mix(in srgb, var(--yellow-deep) 75%, var(--ink)); }
.ev-meta .m.hot { color: var(--hot); }
.ev-meta .mbtn { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 600; cursor: pointer; }
.ev-meta .mbtn:hover { text-decoration: underline; }
.ev-meta svg { width: 12px; height: 12px; }
/* MA: az egyetlen piros elem a listában (szürke alap, piros aktív) */
.ev-row.is-ma .ev-when { border-right-color: var(--hot); }
.ev-row.is-ma .ev-d { color: var(--hot); }
.ev-matag { display: inline-block; margin-left: 8px; vertical-align: 2px; background: var(--hot); color: #fff; font-size: .58rem; font-weight: 800; letter-spacing: .06em; border-radius: 999px; padding: 2px 8px; }
.ev-row.is-featured .ev-title { color: var(--brand-text); }
.ev-row.is-past { opacity: .5; }
.ev-row.is-past:hover { opacity: 1; }
/* a múlt EGY csukott foldban - nincs elrejtve, csak nem tolja el a mai naptól a figyelmet */
.ev-fold { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.ev-fold > summary { cursor: pointer; padding: 10px 15px; font-size: .84rem; font-weight: 700; color: var(--ink-2); list-style: none; }
.ev-fold > summary::-webkit-details-marker { display: none; }
.ev-fold > summary::before { content: '▸ '; }
.ev-fold[open] > summary::before { content: '▾ '; }
.ev-foldbody { display: flex; flex-direction: column; gap: 20px; padding: 4px 15px 15px; }

@media (max-width: 720px) {
  .cat-block-head { flex-wrap: wrap; }
  /* mobilon az alcim csak helyet foglal - a cim alatti kis szurke sor elrejtve */
  .cat-block-head > .nm { display: none; }
  .ag-intro { flex-direction: column; }
  .ag-intro-edit { margin-left: 0; }
  /* mobilon a dátum-oszlop keskenyebb, de MARAD oszlop (a hasábos ritmus a lényeg) */
  .ev-row { gap: 10px; padding: 7px 4px 7px 0; }
  .ev-when { width: 52px; padding-right: 9px; }
  .ev-d { font-size: 1.02rem; }
  .ev-meta { gap: 2px 10px; font-size: .72rem; }
  /* hosszú helyszín-név mobilon TÖRDELŐDIK, nem lóg ki a képernyőről (2026-08-12 mérés) */
  .ev-meta .m { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
}

/* ---- nevek, személy-panel, kész-lista ---- */
.ag-pp { font-family: var(--ff); font-size: .62rem; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 8px; cursor: pointer; background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line); }
.ag-pp:hover { border-color: var(--brand); color: var(--brand-text); }
.ag-pp.is-on { background: var(--hot); border-color: var(--hot); color: #fff; }
.cc-tag.ev { background: var(--brand-100); color: var(--brand-text); }

.ag-person { background: var(--card); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-left: 3px solid var(--brand); border-radius: var(--r-card); padding: 13px 16px; margin-bottom: 22px; max-width: 1020px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 9px; }
.ag-person-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ag-person-name { font-family: var(--ff-display); font-size: 1.2rem; font-weight: 700; letter-spacing: var(--head-ls); }
.ag-person-sum { font-size: .78rem; color: var(--ink-2); font-weight: 600; }
.ag-person-head .btn { margin-left: auto; }
.ag-person-taught { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ag-person-h { font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-right: 3px; }

.ag-done-list { display: flex; flex-direction: column; gap: 4px; max-width: 920px; }
.ag-done-row { display: flex; align-items: baseline; gap: 10px; text-align: left; font-family: var(--ff); font-size: .8rem; padding: 7px 12px; border: 1px solid var(--line); border-radius: 7px; background: color-mix(in srgb, var(--paper-2) 55%, var(--card)); color: var(--muted); cursor: pointer; }
.ag-done-row:hover { border-color: var(--line-2); color: var(--ink-2); }
.ag-done-row .ck { flex: none; color: var(--g0); font-weight: 900; }
.ag-done-row .nm { font-weight: 600; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent); }
.ag-done-row .pp { font-size: .7rem; }
.ag-done-row .evt { margin-left: auto; flex: none; font-size: .66rem; font-weight: 700; color: var(--muted); }

/* ---- esemény: kapcsolt feladatok ---- */
.ev-tasks { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); }
.ev-task { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ff); font-size: .7rem; font-weight: 600; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer; }
.ev-task:hover { border-color: var(--line-2); color: var(--ink); }
.ev-task .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.ev-task.st-doing .dot { background: var(--g1); }
.ev-task.st-done { opacity: .6; } .ev-task.st-done .dot { background: var(--g0); }
.ev-task.add { border-style: dashed; color: var(--muted); }
.ev-task.add:hover { color: var(--brand-text); border-color: var(--brand); }
.ag-mode { margin-left: auto; }
.cat-block-head .ag-mode + .ag-add { margin-left: 0; }

/* ---- naptár: eseményenként saját szín, naponként egymás alatti csíkok ---- */
.cal { display: flex; flex-direction: column; gap: 16px; }
.cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.cal-month { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 15px 16px 13px; box-shadow: var(--shadow-1); }
.cal-month.has-ev { border-color: var(--line-2); }
.cal-mh { font-family: var(--ff-display); font-size: 1.02rem; font-weight: 700; letter-spacing: var(--head-ls); margin-bottom: 10px; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-days .wd { font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 4px; }
.cal-days .dd { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 46px; padding: 4px 1px; border-radius: 6px; background: color-mix(in srgb, var(--paper-2) 55%, transparent); }
.cal-days .dd:hover { background: color-mix(in srgb, var(--brand) 9%, var(--paper-2)); }
/* koppintható nap (van rajta esemény/határidő) + a mobil nap-koppintás kiválasztott állapota */
.cal-days .dd.clickable { cursor: pointer; }
.cal-days .dd.sel { outline: 2px solid var(--hot); outline-offset: -2px; background: color-mix(in srgb, var(--hot) 15%, var(--paper-2)); }
.cal-days .dd b { font-family: var(--ff-mono); font-size: .68rem; font-weight: 500; color: var(--ink-2); line-height: 1; }
/* MAI nap: piros animált keret + kiemelt szám + „MA" címke - egyértelmű, hol tartunk */
.cal-days .dd.today { outline: 2px solid var(--hot); outline-offset: -2px; background: color-mix(in srgb, var(--hot) 12%, var(--paper-2)); animation: todayGlow 2.2s ease-in-out infinite; }
.cal-days .dd.today b { color: var(--hot); font-weight: 800; }
.cal-days .dd .today-tag { position: absolute; top: -6px; right: -3px; font-style: normal; font-size: .48rem; font-weight: 800; letter-spacing: .05em; background: var(--hot); color: #fff; padding: 1px 4px; border-radius: 6px; line-height: 1.35; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); z-index: 1; }
@keyframes todayGlow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hot) 42%, transparent); } 55% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--hot) 0%, transparent); } }
.ev-todaybar { margin: -4px 2px 14px; font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.ev-todaybar b { color: var(--hot); font-weight: 700; }
.cal-days .dd .bars { display: flex; flex-direction: column; gap: 2.5px; width: 86%; }
.cal-days .dd .bars em { font-style: normal; font-size: .5rem; line-height: 1; color: var(--muted); text-align: center; }
/* a napok színcsíkja: kattintható gomb, hoverre kiemelés + AZONNALI tooltip
   (a natív title 1 mp késése helyett), kattintásra az esemény szerkesztője nyílik */
.cal-bar { position: relative; display: block; width: 100%; height: 7px; border: 0; border-radius: 3px; padding: 0; cursor: pointer; }
.cal-bar.ft { height: 9px; border-radius: 4px; }
.cal-bar:hover, .cal-bar:focus-visible { filter: brightness(1.22) saturate(1.15); box-shadow: 0 0 0 1.5px var(--card), 0 0 0 3px color-mix(in srgb, var(--ink) 35%, transparent); z-index: 5; }
.cal-bar::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); z-index: 30; display: none; width: max-content; max-width: min(230px, calc(100vw - 20px)); white-space: normal; text-align: left; font-family: var(--ff); font-size: .68rem; font-weight: 600; line-height: 1.35; color: #fff; background: rgba(24, 25, 30, .97); border-radius: 8px; padding: 6px 9px; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.cal-bar:hover::after, .cal-bar:focus-visible::after { display: block; }
.cal-bar.tip-left::after, .cal-flag.tip-left::after { left: 0; transform: none; }
.cal-bar.tip-right::after, .cal-flag.tip-right::after { left: auto; right: 0; transform: none; }
.viewer .cal-bar, .viewer .cal-ev { cursor: default; }
.cal-evs { display: flex; flex-direction: column; gap: 3px; margin-top: 11px; padding-top: 9px; border-top: 1px dashed var(--line); }
/* HAVI LISTA - FIX OSZLOPOK (2026-08-12, user: "össze-vissza tördeli a szövegeket").
   [pötty] [dátum] [óra] [cím] - az óra-oszlop a HÓNAP egészére nyílik vagy marad zárva
   (.has-ora), üres cellával is. A régi flex-sorban az óra megléte soronként más x-re tolta
   a címet, a becsomagolt második sor pedig a pötty alá futott: ettől volt kaotikus. */
.cal-ev { display: grid; grid-template-columns: 11px 48px minmax(0, 1fr); align-items: baseline; column-gap: 8px; text-align: left; font-family: var(--ff); font-size: .78rem; font-weight: 600; color: var(--ink); background: transparent; border: 0; padding: 3px 4px; border-radius: 5px; cursor: pointer; }
.cal-evs.has-ora .cal-ev { grid-template-columns: 11px 48px 38px minmax(0, 1fr); }
.cal-ev:hover { background: var(--brand-100); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 25%, transparent); }
.cal-dot { width: 10px; height: 10px; border-radius: 3px; align-self: start; margin-top: 4px; }
/* csoport-blokkok a havi listában: időszakok elöl, pontosítás alatti tételek a végén */
.cal-sec { display: flex; flex-direction: column; gap: 3px; margin: 4px 0; }
/* az "Időszakok" blokk alá, a "pontosítás alatt" blokk fölé kerül a halvány elválasztó */
.cal-sec:first-child { padding-bottom: 6px; border-bottom: 1px dashed color-mix(in srgb, var(--line-2) 60%, transparent); }
.cal-sec:not(:first-child) { padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--line-2) 60%, transparent); }
.cal-sech { font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 1px 4px; }
.cal-dot.hollow { background: transparent; border: 2px dashed var(--line-2); }
/* FELADAT-HATÁRIDŐK a naptárban (tengely-szinkron): ⚑ a napon, sor a hónap-listában */
.cal-flag { position: relative; display: block; width: 100%; border: 0; background: none; padding: 0; cursor: pointer; font-size: .6rem; line-height: 1; color: var(--hot); text-align: center; }
.cal-flag:hover, .cal-flag:focus-visible { transform: scale(1.35); z-index: 5; }
.cal-flag::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); z-index: 30; display: none; width: max-content; max-width: min(230px, calc(100vw - 20px)); white-space: normal; text-align: left; font-family: var(--ff); font-size: .68rem; font-weight: 600; line-height: 1.35; color: #fff; background: rgba(24, 25, 30, .97); border-radius: 8px; padding: 6px 9px; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.cal-flag:hover::after, .cal-flag:focus-visible::after { display: block; }
.cal-dot.flag { background: none; color: var(--hot); line-height: 1; margin-top: 2px; }
.cal-dot.flag svg { display: block; width: 11px; height: 11px; }
.cal-ev.dl .t { color: var(--ink-2); }
.cal-ev.dl.is-done .t { text-decoration: line-through; color: var(--muted); }
.cal-ev .d { font-family: var(--ff-mono); font-size: .68rem; font-weight: 700; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-ev .h { font-family: var(--ff-mono); font-size: .68rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-ev .t { line-height: 1.32; overflow-wrap: anywhere; }
/* a hónap határán átnyúló tétel TELJES időtartama, emberi nyelven (a régi …/→ jelek helyett) */
.cal-tart { display: block; font-style: normal; font-family: var(--ff-mono); font-size: .64rem; font-weight: 600; color: var(--muted); margin-top: 1px; }
.cal-ev.fuzzy .t { color: var(--ink-2); }
/* MÚLT-elhalványítás: a mai nap ELŐTT lezárult események (naptár-csík, havi lista-sor, lista-kártya).
   Csak vizuál - az esemény megmarad; hoverre visszaáll, hogy jól olvasható/kattintható legyen. */
.cal-bar.is-past { opacity: .3; }
.cal-ev.is-past { opacity: .45; }
.cal-ev.is-past:hover { opacity: 1; }
/* nap-koppintással kiválasztott esemény-sor(ok) a hónap-listában: piros keret + halvány háttér */
.cal-ev.is-sel { background: color-mix(in srgb, var(--hot) 12%, transparent); box-shadow: inset 0 0 0 2px var(--hot); border-radius: 6px; opacity: 1; }
.agc.is-past { opacity: .5; }
.agc.is-past:hover { opacity: 1; }
.cal-ev .w { margin-left: auto; flex: none; font-size: .62rem; color: var(--muted); font-weight: 500; }
.cal-undated { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 11px 14px; border: 1px dashed var(--line-2); border-radius: var(--r-card); max-width: 1020px; }
.cal-undated-h { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* a dátum nélküli tételek chipjei NEM a havi lista oszlop-rácsán ülnek (csak cím + mikor) */
.cal-undated .cal-ev.loose { display: flex; align-items: baseline; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 11px; background: var(--card); }

@media (max-width: 720px) {
  .ag-mode { margin-left: 0; }
  .ag-person-head .btn { margin-left: 0; }
}

/* ---- T/H badge + névjegyzék ---- */
.pb { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 4px; font-size: .52rem; font-weight: 800; letter-spacing: 0; margin-right: 5px; vertical-align: 1px; }
.pb.t { background: var(--brand-100); color: var(--brand-text); }
.pb.h { background: var(--g1-100); color: var(--g1); }
.pb.i { background: var(--g0-100); color: var(--g0); }   /* intézményi */
.pb.a { background: var(--g2-100); color: var(--g2); }   /* alumni */
.pb.p { background: color-mix(in srgb, var(--yellow-deep) 22%, transparent); color: #8a6d1c; } /* piaci */
html[data-theme='dark'] .pb.p { color: var(--yellow-deep); }
.ag-pp .pb { margin-right: 4px; }
.ag-pp.is-on .pb.t, .ag-pp.is-on .pb.h { background: rgba(255, 255, 255, .25); color: #fff; }
.chip.is-on .pb.t, .chip.is-on .pb.h { background: rgba(255, 255, 255, .25); color: #fff; }
/* NINCS belső görgetés: a lista a tartalommal együtt nő, csak a modál törzse görget */
.pp-picker { border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
/* Resztvevo-valaszto (attekintheto): kivalasztottak felul, kereses-elso hozzaadas,
   kategoria-fulek - a teljes nevfal sosem latszik egyben */
.pp-wrap { display: flex; flex-direction: column; gap: 7px; }
.pp-selrow { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 7px 9px; border: 1px dashed var(--line); border-radius: 10px; background: var(--paper-2); }
.pp-selcount { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: 3px; }
.pp-selchip .pp-x { margin-left: 6px; opacity: .7; font-size: .72rem; }
.pp-selchip:hover .pp-x { opacity: 1; }
.pp-cats { display: flex; flex-wrap: wrap; gap: 5px; }
/* Órarend: oktató-összehasonlító chipsor + színkód */
.or-teach { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.or-tin { border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: calc(13px * var(--md-fskala, 1)); background: var(--paper); color: inherit; min-width: 250px; }
.or-tin:focus { outline: none; border-color: var(--ink); }
.or-tchip { font-weight: 700; border-width: 2px; }
.or-tdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 5px; flex: none; }
.or-tsugg { margin-top: 4px; }
.orc-card--sel { border-left-width: 5px; }

/* Kulcs nélküli publikus látogató: teljes, üres zár-oldal - semmilyen adat/menü/név */
.lockpane { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg, #f5f5f4); font-size: 28px; opacity: .35; user-select: none; }

.pp-browse { display: flex; flex-direction: column; gap: 6px; }
.pp-subrow { margin-top: 2px; }
.pp-addall { align-self: flex-start; border-style: dashed; font-weight: 700; }
.pp-scroll { max-height: 220px; overflow-y: auto; }
.pp-nohit { font-size: .78rem; color: var(--muted); padding: 2px 4px; }

.modal--wide { width: min(980px, 94vw); }
.pm-body { padding: 14px 20px 6px; }
.pm-note { font-size: .78rem; color: var(--ink-2); line-height: 1.5; padding: 9px 12px; background: var(--paper-2); border-radius: 8px; margin-bottom: 13px; }
.pm-sec { display: flex; align-items: center; gap: 7px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 14px 0 7px; }
.pm-sec .pb { width: 15px; height: 15px; font-size: .58rem; margin: 0; }
.pm-rows { display: flex; flex-direction: column; gap: 5px; }
.pm-row { display: grid; grid-template-columns: minmax(120px, 1.1fr) 1.4fr 1fr 30px; gap: 7px; align-items: center; }
/* a felirat 2 px-szel beljebb (user, 2026-08-09): a mező szövege a szegély + lekerekítés
   miatt kezdődik beljebb, így a fejléc optikailag is a beírt szöveg vonalára esik */
.pm-row.pm-head span { font-size: .58rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding-left: 2px; }
.pm-name { font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-row input { border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; font-size: .82rem; font-family: var(--ff); color: var(--ink); background: var(--card); min-width: 0; }
.pm-row input:focus { outline: 2px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: 1px; border-color: var(--brand); }
.pm-del { padding: 5px 8px; }
/* ---- Névjegyzék-sor gyorsgombjai: teljes névjegy másolása, email másolása, hívás ---- */
/* email/telefon cella: a mező mellett közvetlenül a hozzá tartozó gomb */
.pm-cell { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pm-cell input { flex: 1 1 auto; min-width: 0; }
.pm-mini { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--line); border-radius: 7px; background: var(--paper-2); color: var(--ink-2);
  font-size: .78rem; line-height: 1; cursor: pointer; text-decoration: none; }
.pm-mini:hover { border-color: var(--brand); color: var(--brand-text); background: var(--card); }
.pm-mini:disabled { opacity: .3; cursor: default; }
.pm-mini.is-ok { background: var(--g0); border-color: var(--g0); color: #fff; }
/* a teljes névjegy másolása a sor ELEJÉN - hangsúlyosabb, mint a mezőnkénti gombok */
.pm-vcard { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); color: var(--brand-text); }
.pm-call:hover { background: var(--g0); border-color: var(--g0); color: #fff; }
.pm-mini--off { opacity: .25; cursor: default; }
.pm-add { align-self: flex-start; margin-top: 4px; }
/* a hozzáadás-gomb a szekció TETEJÉN, fix helyen - mobilon nem kell a lista aljára görgetni */
.pm-add--top { margin-top: 0; margin-bottom: 8px; }

@media (max-width: 720px) {
  .pm-row { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .pm-row.pm-head { display: none; }
  .pm-row .pm-name, .pm-row input:first-child { grid-column: 1 / -1; }
}

/* ---- Értesítés gomb a kártyákon ---- */
.ag-notify { margin-top: 10px; font-family: var(--ff); font-size: .68rem; font-weight: 700; letter-spacing: .02em; padding: 5px 11px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line)); background: var(--card); color: var(--brand-text); cursor: pointer; }
.ag-notify:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.ev-task.notify { border-style: solid; color: var(--brand-text); border-color: color-mix(in srgb, var(--brand) 32%, var(--line)); }
.ev-task.notify:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---- NotifyModal ---- */
.nm-body .field { margin-bottom: 12px; }
.nm-warn { font-size: .8rem; line-height: 1.5; color: var(--brand-text); background: var(--brand-100); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.nm-warn code { font-family: var(--ff-mono); font-size: .92em; }
.nm-info { font-size: .82rem; line-height: 1.55; color: var(--ink-2); background: var(--paper-2); border-radius: 8px; padding: 10px 12px; margin-bottom: 13px; }
.nm-info strong { color: var(--ink); }
.nm-copyrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.nm-groups { display: flex; flex-wrap: wrap; gap: 6px; }
.nm-recips { border-style: dashed; }
.nm-empty { font-size: .8rem; color: var(--muted); }
.nm-noemail { opacity: .6; }
.chip.is-on.nm-noemail { background: var(--muted); border-color: var(--muted); }
.nm-missing { margin-top: 6px; font-size: .74rem; color: var(--brand-text); }
.nm-result { margin-top: 4px; font-size: .82rem; font-weight: 600; padding: 8px 11px; border-radius: 7px; }
.nm-result.ok { color: var(--g0); background: color-mix(in srgb, var(--g0) 12%, var(--card)); }
.nm-result.err { color: var(--brand-text); background: var(--brand-100); }
.nm-hint { font-size: .72rem; color: var(--muted); }

/* ---- PeopleModal: egyedi csoportok ---- */
.pm-groups { display: flex; flex-direction: column; gap: 10px; }
.pm-group { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.pm-group-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.pm-group-head input { flex: 1; border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; font-size: .86rem; font-family: var(--ff); font-weight: 600; color: var(--ink); background: var(--card); }
.pm-group-n { font-size: .68rem; color: var(--muted); font-weight: 600; flex: none; }

/* ---- Feladatok: pipa, prioritás, kategória, csoportosítás ---- */
.ag-cardtop { display: flex; align-items: flex-start; gap: 10px; }
.ag-cardtop .cc-name { flex: 1; padding-right: 22px; }
.ag-check { flex: none; width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--line-2); border-radius: 6px; background: var(--card); cursor: pointer; display: grid; place-items: center; font-size: .8rem; font-weight: 900; color: #fff; line-height: 1; }
.ag-check:hover { border-color: var(--g0); }
/* üres négyzetként nehéz felismerni: hoverre halvány pipa jelzi, mire való */
.ag-check:not(.is-on):hover::before { content: '✓'; color: var(--g0); }
.ag-check.is-on { background: var(--g0); border-color: var(--g0); }

.ag-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 9px 0 2px; }
.ag-prio { font-family: var(--ff); font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.ag-prio.high { background: color-mix(in srgb, var(--brand) 15%, var(--card)); color: var(--brand-text); border-color: color-mix(in srgb, var(--brand) 42%, var(--line)); }
.ag-prio.normal { background: color-mix(in srgb, var(--yellow) 30%, var(--card)); color: #7a5c14; border-color: color-mix(in srgb, var(--yellow-deep) 55%, var(--line)); }
.ag-prio.low { background: var(--paper-2); color: var(--muted); border-color: var(--line); }
.ag-prio:hover { filter: brightness(.97); }

.ag-cat { font-family: var(--ff); font-size: .62rem; font-weight: 700; letter-spacing: .02em; padding: 3px 9px; border-radius: 8px; cursor: pointer; background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line); }
.ag-cat:hover { border-color: var(--brand); color: var(--brand-text); }
.ag-cat.is-on { background: var(--hot); color: #fff; border-color: var(--hot); }
.ag-cat.on-card { background: color-mix(in srgb, var(--g1) 12%, var(--card)); color: var(--g1); border-color: color-mix(in srgb, var(--g1) 34%, var(--line)); }
/* „Besorolatlan" (triázs-vödör): szaggatott keret, hogy elváljon a valódi kategóriáktól */
.ag-cat--uncat { border-style: dashed; border-color: var(--brand); color: var(--brand-text); }
.ag-cat--uncat.is-on { border-style: solid; }
/* kártya-sorszám a listában (egyezik a részletező „n / összes" swipe-számával) */
.ag-no { font-size: .68rem; font-weight: 800; color: var(--ink-2); margin-right: 6px; font-variant-numeric: tabular-nums; opacity: .75; }
/* kapcsolódó-esemény predikciós választó */
.evpick { display: flex; flex-direction: column; gap: 6px; }
.evpick--sel { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
.evpick-cur { font-weight: 600; color: var(--ink); }

.ag-doing { font-family: var(--ff); font-size: .6rem; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 8px; cursor: pointer; background: transparent; color: var(--muted); border: 1px dashed var(--line-2); }
.ag-doing:hover { border-color: var(--g1); color: var(--g1); }
.ag-doing.is-on { background: color-mix(in srgb, var(--g1) 15%, var(--card)); color: var(--g1); border: 1px solid color-mix(in srgb, var(--g1) 42%, var(--line)); }

.ag-card.is-doing { box-shadow: inset 3px 0 0 var(--g1), var(--shadow-1); }
.ag-card.prio-high .cc-accent { background: var(--brand); }
.ag-card.prio-normal .cc-accent { background: var(--yellow-deep); }
.ag-card.prio-low .cc-accent { background: var(--g3); }

/* csoportosítás-fejléc színek */
.ag-grp.prio-high { color: var(--brand-text); } .ag-grp.prio-high::before { background: var(--brand); }
.ag-grp.prio-normal { color: #7a5c14; } .ag-grp.prio-normal::before { background: var(--yellow-deep); }
.ag-grp.prio-low { color: var(--muted); } .ag-grp.prio-low::before { background: var(--g3); }
.ag-grp.cat { color: var(--ink); } .ag-grp.cat::before { background: var(--ink); }

/* kategória-szűrő chipsor */
.ag-catfilter { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 16px; }

/* kész-lista: pipa + megnyitás */
.ag-done-row { display: flex; align-items: center; gap: 9px; }
.ag-done-row .ag-check { width: 19px; height: 19px; margin: 0; }
.ag-done-open { flex: 1; display: flex; align-items: baseline; gap: 10px; text-align: left; font-family: var(--ff); font-size: .8rem; padding: 7px 12px; border: 1px solid var(--line); border-radius: 7px; background: color-mix(in srgb, var(--paper-2) 55%, var(--card)); color: var(--muted); cursor: pointer; }
.ag-done-open:hover { border-color: var(--line-2); color: var(--ink-2); }
.ag-done-open .nm { font-weight: 600; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent); }
.ag-done-open .cat { font-size: .64rem; font-weight: 700; color: var(--ink-2); }
.ag-done-open .pp { font-size: .7rem; }
.ag-done-open .evt { margin-left: auto; flex: none; font-size: .66rem; font-weight: 700; color: var(--muted); }

@media (max-width: 720px) {
  .cat-block-head .ag-mode { margin-left: 0; }
}

/* esemény készültség-jelző (kapcsolt feladatok) */
.ev-progress { display: inline-block; margin-left: 9px; vertical-align: 2px; font-family: var(--ff); font-size: .62rem; font-weight: 800; letter-spacing: .03em; padding: 2px 9px; border-radius: 999px; background: var(--brand-100); color: var(--brand-text); }
.ev-progress.all-done { background: color-mix(in srgb, var(--g0) 14%, var(--card)); color: var(--g0); }


/* hosszú háttér-időszak a hónap-listában: karikás jelölés, halványabb sor */
.cal-dot.ring { background: transparent; border: 2.5px solid; }
/* háttér-időszak: halványabb, de AZONOS betűvastagság/dőlés (2026-08-12) - a dőlt, vékonyabb
   szedés a becsomagolt sorokkal együtt tette olvashatatlanná a listát */
.cal-ev.is-long .t { color: var(--ink-2); }

/* ---- kiemelt események: a NAPTÁRBAN lüktetnek, a kártyán csillag ---- */
.ev-star { color: var(--yellow-deep); }
.cal-days .dd .bars .cal-bar.ft { height: 9px; border-radius: 4px; }
/* a kiemelt esemény NAPJA: lüktető keret + halvány kiemelő háttér */
@keyframes featDayPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.cal-days .dd.has-feat { outline: 2px solid color-mix(in srgb, var(--brand) 65%, transparent); outline-offset: -2px; background: color-mix(in srgb, var(--brand) 10%, var(--card)); animation: featDayPulse 2s ease-out infinite; position: relative; z-index: 1; }
.cal-days .dd.has-feat b { color: var(--brand-text); font-weight: 800; }
/* a kiemelt esemény SORA a hónap-listában: finoman villogó háttér + csillag */
@keyframes featRowGlow {
  0%, 100% { background: color-mix(in srgb, var(--brand) 5%, transparent); }
  50% { background: color-mix(in srgb, var(--brand) 16%, transparent); }
}
.cal-ev.is-feat { animation: featRowGlow 2.2s ease-in-out infinite; border-radius: 6px; }
.cal-ev.is-feat .t { font-weight: 800; }
@media (prefers-reduced-motion: reduce) {
  .cal-days .dd.has-feat, .cal-ev.is-feat { animation: none; }
  .cal-ev.is-feat { background: color-mix(in srgb, var(--brand) 10%, transparent); }
}

/* ---- levél-készítő: 1-2-3 másolás-gombok, szöveg-előnézet, mentett levelek ---- */
.nm-copyrow.big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 10px; }
/* Outlook webmail gomb a másolósor alján, teljes szélességben */
.nm-outlook { grid-column: 1 / -1; text-decoration: none; background: var(--brand-100); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.nm-copy { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; font-size: .86rem; font-weight: 700; border: 1.5px solid color-mix(in srgb, var(--brand) 30%, var(--line)); color: var(--brand-text); background: var(--card); }
.nm-copy:hover:not(:disabled) { background: var(--brand); color: #fff; border-color: var(--brand); }
.nm-copy:disabled { opacity: .45; cursor: default; }
.nm-copy b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; font-size: .72rem; flex: none; }
.nm-copy:hover:not(:disabled) b { background: #fff; color: var(--brand-text); }
.nm-bodytoggle { margin-left: 8px; font-family: var(--ff); font-size: .64rem; font-weight: 700; color: var(--brand-text); background: var(--brand-100); border: 0; border-radius: 10px; padding: 2px 9px; cursor: pointer; text-transform: none; letter-spacing: 0; }
/* teljes újrafogalmazás: hangsúlyosabb, nagyobb gomb a kis megszólítás-csere mellett */
.nm-reroll-big { margin-left: 8px; font-family: var(--ff); font-size: .72rem; font-weight: 800; color: #fff; background: var(--brand); border: 0; border-radius: 10px; padding: 4px 12px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.nm-reroll-big:hover { filter: brightness(1.1); }
.nm-bodytoggle.nm-off { opacity: .55; text-decoration: line-through; }
.nm-preview { border: 1px dashed var(--line-2); border-radius: 9px; padding: 13px 15px; font-size: .95rem; line-height: 1.55; color: var(--ink); cursor: pointer; background: color-mix(in srgb, var(--paper-2) 45%, transparent); }
/* a teljes levél egyben látszik, bekezdésekkel */
.nm-preview-text { white-space: pre-wrap; }
/* jobb oldali sáv az üzenet mellett (lépés-választó + sablontár); mobilon az üzenet FELETT */
@media (min-width: 721px) {
  .nm-msgrow { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 16px; align-items: start; }
  .nm-msgrow .nm-msg { grid-column: 1; grid-row: 1; }
  .nm-msgrow .nm-side { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 14px; }
}
/* sablontár-panel a levéltörzs mellett: kereshető, csoportosított lista */
.nm-topicpanel input { margin-bottom: 6px; }
.nm-topiclist { max-height: 380px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--paper-2) 45%, transparent); }
.nm-tgh { position: sticky; top: 0; z-index: 1; padding: 5px 10px 4px; font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-text); background: var(--paper); border-bottom: 1px solid var(--line); }
.nm-titem { display: block; width: 100%; text-align: left; padding: 6px 10px; font-family: var(--ff); font-size: .74rem; line-height: 1.3; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.nm-titem:hover { background: var(--brand-100); color: var(--brand-text); }
@media (max-width: 720px) {
  /* mobilon a panel elmarad, ott a 2-es szakasz legördülője a sablonválasztó */
  .nm-topicpanel { display: none; }
}
/* az üzenet eszközsora: a 4 gomb a címke alatt, saját sorban (nem a label-be zsúfolva) */
.nm-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.nm-tools .nm-bodytoggle, .nm-tools .nm-reroll-big { margin-left: 0; }
/* az előnézet gombként: teljes szélesség, öröklött betű, balra zárt */
button.nm-preview { display: block; width: 100%; text-align: left; font: inherit; }
/* gombok felirata balra igazítva: széles gombon a középre zárt szöveg furán néz ki */
.modal .btn, .modal .chip, .modal .crx, .nm-bodytoggle, .nm-reroll-big { text-align: left; }
.nm-copy { justify-content: flex-start; }
/* törlő jellegű chip: ránézésre elkülönül az additív chipektől */
.chip--danger { background: transparent; border-color: #d7144b; color: #d7144b; }
/* üres listájú gyorsgomb: látszik, de jelzi, hogy előbb fel kell tölteni */
.chip:disabled { opacity: .45; cursor: not-allowed; }
/* névszűrő a névsor felett */
.nm-search { margin-bottom: 8px; }
/* ötoszlopos kapcsolat-sorok a Névjegyzékben (intézményi / alumni / piaci) */
/* 8 sav: vcard | nev | email | telefon | BECENEV | titulus | terulet | torles.
   A becenev-oszlop 2026-08-04-ig hianyzott a fejlecbol es a racsbol: a sor 8 eleme
   7 savba futott, ezert a "Titulus"-tol minden felirat egy oszloppal elcsuszott es
   a sor tordelt. A savszam MINDIG egyezzen a .pm-row5 sorok gyerekszamaval. */
/* FIX szélű első/utolsó oszlop (2026-08-09, user-panasz: „a feliratok nem az inputok bal
   szélénél kezdődnek"). Ok: a fejléc és MINDEN adatsor KÜLÖN rács, tehát az `auto` oszlop
   soronként más széles - a fejlécben üres span (0 px), az adatsorban 28 px-es ikon-gomb,
   ezért a feliratok balra csúsztak az inputokhoz képest. A 28 px = .pm-mini mérete. */
.pm-row5 { display: grid; grid-template-columns: 28px 1.2fr 1.3fr 1fr .85fr 1fr 1fr 28px; gap: 6px; align-items: center; }
@media (max-width: 720px) { .pm-row5.pm-head { display: none; } }
/* kategória-szűrő a névsor felett */
.nm-kindrow { margin-bottom: 8px; }
/* az egységes címzett-blokk sorai: apró sorkezdő felirat + tartalom */
.nm-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 9px; }
.nm-row .chipradio, .nm-row .nm-groups { flex: 1; min-width: 0; }
.nm-hint { flex: none; width: 58px; padding-top: 7px; font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
/* letiltott preset-gomb: látszik, de jelzi, hogy előfeltétele van */
.crx:disabled { opacity: .45; cursor: not-allowed; }
/* ---- bemutató (csak-olvasó) mód: minden szerkesztő elem rejtve ---- */
.viewer .cn-edit, .viewer .dr-edit, .viewer .dr-edit-top, .viewer .sem-add,
.viewer .ag-add, .viewer .ag-check, .viewer .ag-prio, .viewer .ag-doing, .viewer .ag-star,
.viewer .ag-notify, .viewer .ev-task, .viewer .lockbtn, .viewer .alignbtn,
.viewer .ag-intro-edit, .viewer .editonly { display: none !important; }
/* nézőnek az alfeladat-pipa látszik (informatív), de nem kattintható */
.viewer .ag-scheck { pointer-events: none; }
.viewer-badge { position: fixed; bottom: 10px; right: 12px; z-index: 60; font-size: .72rem; font-weight: 800; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; background: var(--brand); color: #fff; box-shadow: 0 4px 14px rgba(16, 17, 20, .25); pointer-events: none; }

/* félév-szűrő a katalógus tetején */
.cat-semfilter { display: inline-flex; flex-wrap: wrap; margin-bottom: 12px; row-gap: 4px; }
.cat-semfilter button.is-on { background: var(--hot); color: #fff; }

/* ---- pillanatkép-betöltő ---- */
.snap-latest { width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 10px; }
.snap-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; max-width: 100%; }
.snap-row { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; font-family: var(--ff); padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); cursor: pointer; }
.snap-row:hover { border-color: var(--brand); }
.snap-row .s { font-size: .82rem; font-weight: 700; color: var(--ink); }
.snap-row .d { font-size: .64rem; color: var(--ink-2); font-family: var(--ff-mono); }

/* felső akciósor a feladat/esemény szerkesztőben: ugrás a levélíróra */
.m-topact { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.nm-jump { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); color: var(--brand-text); background: var(--brand-100); font-weight: 700; }
/* feladó-megadás sor a levél-készítőben */
.nm-srcrow { display: flex; flex-wrap: wrap; gap: 8px; }
.nm-srcrow input { flex: 1 1 160px; }
.nm-srcrow .btn { flex: none; }
/* a számozott szekciófejek a levél-modálban is tagolnak */
.nm-body .f-sec { margin: 16px 0 10px; }
.nm-body .f-sec:first-child { margin-top: 2px; }
/* meeting-javaslat sor a levél-készítőben */
.nm-meetrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.nm-meetrow .nm-meeturl { flex: 1 1 220px; }
.nm-meetlink { text-decoration: none; display: inline-block; }
/* új oktató felvétele sor a tárgyszerkesztőben */
.em-addrow { display: flex; gap: 8px; margin-top: 8px; }
.em-addrow input { flex: 1; }
.em-addrow .btn { flex: none; }
/* email nélküli KIJELÖLT címzett: figyelmeztető sárga, nem "letiltott" szürke */
.chip.is-on.nm-noemail { opacity: 1; background: var(--yellow-deep); border-color: var(--yellow-deep); color: #241c05; }
/* mezőcímkék kontrasztja a levél-modálban */
.nm-body .field label { color: var(--ink-2); font-size: .68rem; }

/* mobil: a levél szövege SAJÁT, jól elhatárolt sávban görget (nem nyújtja végtelenre a modált);
   az overscroll-containment miatt a sáv görgetése nem mozgatja a modál külső görgetését */
@media (max-width: 720px) {
  .nm-msg .nm-preview, .nm-msg textarea.ta-grow { max-height: 44dvh; overflow-y: auto; overscroll-behavior: contain; }
  .nm-msg .nm-preview { background: color-mix(in srgb, var(--brand) 4%, var(--card)); border: 1.5px solid color-mix(in srgb, var(--brand) 25%, var(--line)); box-shadow: inset 0 -16px 14px -16px rgba(0, 0, 0, .22); }
  .nm-body .field { margin-bottom: 16px; }
  /* érintési célfelületek: chipek és eszköz-gombok legalább ~40px magasak */
  .nm-body .chip { padding: 10px 14px; font-size: .86rem; }
  .nm-body .cat-picker, .nm-groups { gap: 8px; }
  .nm-body .nm-tools .nm-bodytoggle { min-height: 40px; padding: 8px 13px; font-size: .78rem; }
  .nm-body .nm-tools .nm-reroll-big { min-height: 40px; padding: 10px 16px; font-size: .84rem; }
  /* az 1-2-3 másolósáv mindig kéznél: a görgető törzs aljára tapad, teljes szélességben
     (nincs átlátszó rés a lábléc és a tartalom között) */
  .nm-body { padding-bottom: 0; }
  .nm-copyrow.big { position: sticky; bottom: 0; z-index: 5; background: var(--card); margin: 8px -20px 0; padding: 10px 20px 10px; box-shadow: 0 -10px 14px -12px rgba(0, 0, 0, .3); }
}
.nm-preview:hover { border-color: var(--brand); }
.nm-preview .more { display: block; margin-top: 6px; font-size: .7rem; font-weight: 700; color: var(--muted); }
.nm-letters { display: flex; flex-direction: column; gap: 5px; }
.nm-letter { display: flex; align-items: center; gap: 7px; }
.nm-letter-load { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; font-family: var(--ff); padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); cursor: pointer; }
.nm-letter-load:hover { border-color: var(--brand); }
.nm-letter-load .s { font-size: .8rem; font-weight: 700; color: var(--ink); }
.nm-letter-load .d { font-size: .64rem; color: var(--muted); font-family: var(--ff-mono); }
/* helyszín-gyorskitöltő: épület + terem chipek az input alatt */
.place-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.pq-sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 3px; flex: none; }

/* mobil: KOMPAKT másolósáv - a 3 gomb egy sorban, az Outlook vékony sávként alatta,
   így a szerkesztő felület kap minél több magasságot */
@media (max-width: 720px) {
  .nm-copyrow.big { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .nm-copy { padding: 8px 6px; font-size: .72rem; gap: 5px; white-space: nowrap; overflow: hidden; }
  .nm-copy b { width: 16px; height: 16px; font-size: .6rem; }
  .nm-cnt { display: none; }
  .nm-outlook { padding: 7px 10px; font-size: .72rem; }
}

/* ============ Levelek nezet (TopicsView): 3 oszlop = lista | elonezet | szerkeszto ============
   Desktopon az OLDAL nem gorget: a fejlec fix, a harom oszlop toltike ki a magassagot,
   es mindegyikben PONTOSAN EGY gorgeto van - nincs egymasba agyazott scroll. */
.tpv { position: absolute; inset: 0; overflow: hidden; padding: 18px var(--pad) 14px; display: flex; flex-direction: column; }
/* (a régi tp-headrow/tp-title fejléc-minta megszűnt - mindenhol a PageHead / .cat-block-head él) */
.tpv > .cat-block-head { flex: none; }
/* ÍRÁS-KÖZPONTÚ: keskeny lista + NAGY szerkesztő (nincs előnézet-oszlop) */
.tp3 { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.tp-listcol { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tp-filters { display: flex; gap: 6px; margin-bottom: 8px; }
.tp-filters .nm-search { flex: 1; margin-bottom: 0; min-width: 0; }
.tp-grpsel { max-width: 45%; font-size: .74rem; }
.tp-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
/* csoport-accordion fejlec: alapbol osszecsukva, szamlaloval */
.tp-ghbtn { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; padding: 8px 12px; font-family: var(--ff); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-text); background: var(--paper); border: 0; border-bottom: 1px solid var(--line); cursor: pointer; position: sticky; top: 0; z-index: 1; }
.tp-ghbtn:hover { background: var(--brand-100); }
.tp-ghbtn .ar { flex: none; width: 11px; font-size: .7rem; color: var(--muted); }
.tp-ghbtn .ct { margin-left: auto; font-size: .62rem; font-weight: 700; color: var(--muted); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.tp-item { display: block; width: 100%; text-align: left; padding: 9px 12px; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; font-family: var(--ff); }
.tp-item:hover { background: var(--brand-100); }
.tp-item.is-on { background: var(--hot); }
.tp-item.is-on .s, .tp-item.is-on .d { color: #fff; }
.tp-item .s { display: block; font-size: .8rem; font-weight: 700; color: var(--ink); }
.tp-item .d { display: block; margin-top: 2px; font-size: .68rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-empty { padding: 14px; color: var(--muted); font-size: .82rem; }
/* (az előnézet-oszlop megszűnt - a lista-kattintás rögtön a szerkesztőbe tölt) */
.tp-pv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.tp-pv-cta { flex: none; white-space: nowrap; }
.tp-pv-meta { font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-text); }
.tp-pv-title { margin: 3px 0 0; font-family: var(--ff-display); font-size: 1rem; }
.tp-pv-subj { font-size: .78rem; color: var(--ink-2); padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.tp-pv-body { margin: 10px 0 8px; white-space: pre-wrap; font-family: var(--ff); font-size: .84rem; line-height: 1.55; color: var(--ink); }
.tp-pv-hint { margin: 8px 0 0; font-size: .68rem; color: var(--muted); }
.tp-pv-empty { display: grid; place-items: center; min-height: 260px; color: var(--muted); font-size: .84rem; text-align: center; padding: 20px; }
/* a 3. oszlop: a beágyazott, egységes levélszerkesztő */
.tp-composer { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
/* beágyazott levélíró: az összegző sor + fülsor rögzített, CSAK a törzs görget (nincs dupla scroll) */
.nm-inline { flex: 1 1 auto; min-height: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 4px 14px 12px; overflow: hidden; display: flex; flex-direction: column; }
.nm-inline .pm-body.nm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.nm-inline .mt-sum { padding: 8px 4px 0; }
.nm-inline .mt-tabs { padding: 6px 2px 0; }
.nm-inline .nm-topicpanel { display: none; } /* a sablontár itt a bal oszlop, nem duplikáljuk */
@media (max-width: 720px) {
  /* mobilon egy oszlop van és CSAK AZ OLDAL gorget - a belso gorgetok kikapcsolva;
     a felso padding a tobbi nezettel azonos (18px), hogy a cim ne uljon feljebb */
  .tpv { overflow-y: auto; overflow-x: hidden; display: block; padding: 18px var(--pad) 40px; }
  .tp-scroll { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .tp3 { grid-template-columns: 1fr; }
  /* mobilon a SZERKESZTO van FELUL (azert jottel, hogy irj), alatta a sablontar-lista;
     a regi kulon szerkeszto-modal MEGSZUNT (2026-07-22) - a Postazo hub az egyetlen ut.
     Belso gorgeto nincs: az oldal gorget (dupla scroll tilos). */
  .tp3 .tp-composer { display: flex; order: -1; margin-bottom: 14px; }
  .nm-inline { overflow: visible; }
  .nm-inline .pm-body.nm-body { overflow-y: visible; min-height: 0; }
}

/* Nevjegyzek: 9 sav - vcard | nev | email | telefon | BECENEV | titulus | terulet |
   statusz | torles. A becenev-oszlop 2026-08-04-ig hianyzott a racsbol es a fejlecbol
   (az oktatoi sor 9 eleme 8 savba futott), ezert csuszott el a "Titulus"-tol minden
   felirat es tordelt ket sorba a nev. A savszam MINDIG egyezzen a sorok gyerekszamaval. */
/* az első oszlop itt is FIX (lásd .pm-row5 indoklása): az `auto` a fejlécben 0 px volt,
   az adatsorban 28 px-es 📇 gomb, ezért a feliratok balra csúsztak az inputokhoz képest */
.pm-row6 { display: grid; grid-template-columns: 28px 1.2fr 1.3fr 1fr .85fr 1fr 1fr .8fr 28px; gap: 6px; align-items: center; }
.pm-row6 select { border: 1px solid var(--line); border-radius: 7px; padding: 6px 6px; font-size: .78rem; font-family: var(--ff); color: var(--ink); background: var(--card); min-width: 0; }
.pm-former { font-style: normal; font-size: .6rem; font-weight: 800; color: var(--brand-text); background: var(--brand-100); border-radius: 6px; padding: 1px 5px; margin-left: 5px; white-space: nowrap; }
.pm-sec-extra { font-weight: 600; color: var(--muted); font-size: .72rem; margin-left: 6px; }
@media (max-width: 720px) { .pm-row6.pm-head { display: none; } }

/* Opponens badge */
.pb.o { background: #0e7f7f; color: #fff; }

/* Munkatárs badge (közeli kollégák) */
.pb.m { background: color-mix(in srgb, #d9488a 22%, transparent); color: #b02e6f; }
html[data-theme='dark'] .pb.m { color: #f090c0; }

/* Nevjegyzek: kereso + tabla-szuro sav (sticky, nem kell gorgetni) */
.pm-toolbar { position: sticky; top: 0; z-index: 6; display: flex; flex-direction: column; gap: 8px; padding: 8px 0 10px; margin-bottom: 6px; background: var(--card); border-bottom: 1px solid var(--line); }
.pm-search { margin-bottom: 0; }
/* Hallgatoi evfolyam-szuro: a chipsor ALATTI kulon sor, hogy ne torzitsa a menukiosztast
   (dupla szelektor: a kesobbi .tp-grpsel meretezes ne irja felul) */
.pm-toolbar .pm-cohsel { align-self: flex-start; max-width: none; min-width: 220px; padding: 7px 10px; font-size: .82rem; }
@media (max-width: 720px) { .pm-toolbar .pm-cohsel { align-self: stretch; min-width: 0; font-size: max(16px, calc(16px * var(--md-fskala, 1))); padding: 9px 12px; } }
/* Nyomtatas-sor: a gomb mellett mindig ott all, MI kerul a lapra */
.pm-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pm-print { flex: none; min-height: 40px; font-weight: 700; }
.pm-print:disabled { opacity: .45; cursor: default; }
.pm-actions-info { font-size: .76rem; color: var(--ink-2); }
.pm-actions-info b { color: var(--brand-text); }
.pm-actions-warn { font-size: .76rem; color: var(--hot); }
@media (max-width: 720px) {
  /* mobilon a gomb TELJES szelessegu, a magyarazat alatta - nem szorul kesken a chipsor melle */
  .pm-actions { gap: 6px; }
  .pm-print { flex: 1 1 100%; min-height: 44px; }
  .pm-actions-info { flex: 1 1 100%; }
}

/* Orarend nezet */
.orv { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 18px var(--pad) 48px; }
/* Orarend + Segedletek: a cim a gorgeton KIVUL all - gorgeteskor semmi nem uszik
   a cim moge/fole; EGYETLEN fuggoleges gorgeto: .orv-scroll */
.orv--fixhead { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
.orv--fixhead > .cat-block-head { flex: none; }
.orv-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 48px; }
/* A felev kulcsdatumai az orarend tetejen (a hivatalos Tanev rendjebol) */
.or-key { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.or-kd { font-size: .7rem; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 4px 9px; white-space: nowrap; }
.or-kd b { font-weight: 800; color: var(--brand-text); margin-right: 4px; }
@media (max-width: 720px) {
  .or-key { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .or-key::-webkit-scrollbar { display: none; }
  .or-kd { flex: none; }
}
.or-tools { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; gap: 8px; margin: 0 calc(-1 * var(--pad)) 16px; padding: 10px var(--pad) 10px; background: var(--paper); border-bottom: 1px solid var(--line); }
.or-day { margin-bottom: 18px; }
.or-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.or-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.or-table th { position: sticky; top: 0; text-align: left; padding: 8px 10px; font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-text); background: var(--paper); border-bottom: 1px solid var(--line); white-space: nowrap; }
.or-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.or-table tr:last-child td { border-bottom: 0; }
.or-table tr:hover td { background: var(--brand-100); }
.or-ido { white-space: nowrap; font-weight: 700; }
.or-targy { font-weight: 700; }
.or-warn { margin-left: 5px; cursor: help; }
/* ANGOL NYELVŰ (MEDI ENG) óra jelvénye. 2026-07-30 óta ezek is benne vannak az órarendben,
   ezért kell a szemnek egy azonnali megkülönböztető - a nyelv-szűrő chipek mellé. */
.or-en { display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 4px; font-size: .64rem; font-weight: 800; letter-spacing: .04em; vertical-align: 1px;
  background: var(--en-100); color: var(--en); border: 1px solid color-mix(in srgb, var(--en) 40%, var(--line)); }
td > .or-en { margin-right: 0; margin-left: 5px; }
@media (max-width: 720px) { .or-table { font-size: .74rem; } .or-table th, .or-table td { padding: 6px 7px; } }

/* Orarend HETI tabla: klasszikus orarend - idosavok sorokban, napok oszlopokban,
   a parhuzamos orak a cellaban egymas ALATT (teljes szelessegu, olvashato kartyak).
   Nincs fix magassag es nincs belso gorgetes: a tabla a lappal egyutt folyik,
   vizszintes gorgetosav csak akkor, ha tenyleg nem fer ki (mobil, minden nap). */
.orc-scroll { overflow-x: auto; margin-bottom: 14px; }
.orc {
  display: grid; min-width: 860px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  --orc-sep: color-mix(in srgb, var(--ink) 20%, transparent);
}
.orc-corner, .orc-dh { padding: 9px 8px 8px; background: var(--paper); border-bottom: 2px solid var(--orc-sep); }
.orc-corner { font-size: .58rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); align-self: end; }
.orc-dh { font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-text); text-align: center; border-left: 2px solid var(--orc-sep); }
.orc-time { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 8px 9px; border-top: 1px solid var(--line); background: var(--paper); font-size: .7rem; white-space: nowrap; }
.orc-time b { font-weight: 800; color: var(--ink); }
.orc-time span { color: var(--muted); font-size: .62rem; }
.orc-cell { display: flex; flex-direction: column; gap: 5px; padding: 6px; min-height: 44px; border-top: 1px solid var(--line); border-left: 2px solid var(--orc-sep); }
/* minden masodik naposzlop enyhe tonust kap - a napok ranezesre elvalnak */
.orc-dh.alt { background-color: color-mix(in srgb, var(--brand) 8%, var(--paper)); }
.orc-cell.alt { background-color: color-mix(in srgb, var(--brand) 4%, var(--card)); }
.orc-card {
  display: flex; flex-direction: column; gap: 1px; padding: 6px 8px;
  border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 8px;
  background: var(--paper); box-shadow: var(--shadow-1);
  font-size: .74rem; line-height: 1.3; cursor: help;
}
.orc-card:hover { border-color: var(--line-2); background: var(--card); box-shadow: 0 3px 10px rgba(0, 0, 0, .12); }
/* tantervi kartyara illesztett ora: kattinthato - ugyanaz a reszletezo nyilik, mint a Matrixban */
.orc-card--link { cursor: pointer; }
.orc-card--link:hover { border-color: var(--g1); box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 0 0 2px color-mix(in srgb, var(--g1) 30%, transparent); }
.orc-card--link:focus-visible { outline: 2px solid var(--g1); outline-offset: 1px; }
.or-targy-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; text-decoration: underline dotted; text-underline-offset: 3px; }
.or-targy-link:hover { color: var(--g1); }
.orc-card-t { font-weight: 800; color: var(--ink); }
.orc-card-m { color: var(--ink-2); }
.orc-card-o { color: var(--ink-2); font-style: italic; }
/* evfolyam-jelzo az oktato neve mellett (BA/MA + hanyadik ev) - halvany, nem versenyez a nevvel */
.or-evf { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: .66rem; font-weight: 700; white-space: nowrap; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); }
.orc-notime { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.orc-notime-h { font-size: .72rem; font-weight: 800; color: var(--ink-2); }
/* egyetlen nap szurve mar keskeny kepernyon is kifer, nem kell gorgetni */
.orc.orc--single { min-width: 0; }
@media (max-width: 720px) { .orc-card { font-size: .7rem; } }

/* Fomenu mobilon (2026-08-10, user-dontes): a gomb-sor EGY sorban, vizszintesen gorgetheto -
   a gorgeto-kontener es a kereso sajat sora a fenti .nav-scroll blokkban van definialva.
   Itt csak a TOMOR gombmeret marad, hogy egy kepernyore minel tobb menupont jusson.
   Az aktiv ful automatikusan a kepbe uszik (CurriculumApp effekt), tehat a gorgetes nem
   rejti el, hol allsz - a korabbi nema levagas ezzel nem terhet vissza. */
@media (max-width: 900px) {
  .toolbar__inner > .viewtoggle--nav { display: flex; width: 100%; flex-wrap: wrap; gap: 0; overflow: visible; }
  .nav-scroll button { white-space: nowrap; text-align: center; padding: 6px 9px; font-size: .74rem; }
}

/* Nevjegyzek nezetkent: a cim a gorgeton KIVUL all (mint a Levelek nezetben) -
   gorgeteskor a tartalom nem uszik a cim moge/fole; EGYETLEN gorgeto: .pmv-scroll */
.pmv { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; padding: 18px var(--pad) 0; }
.pmv > .cat-block-head { flex: none; }
/* alsó térköz: a Névjegyzék „💾 Mentés" lába NE kerüljön a fix mentés-dokk (jobb alsó
   sarok) alá - a dokk fölé emeljük, így nem takarják egymást */
.pmv-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 66px; }
.pmv .pm-body { padding-bottom: 14px; }
.pmv .pm-body { padding: 0; }
.pmv .pm-toolbar { top: 0; border-radius: 0 0 10px 10px; }
.pmv .mfoot { position: sticky; bottom: 0; z-index: 6; border-top: 1px solid var(--line); border-radius: 10px 10px 0 0; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
.pm-saved { font-size: .78rem; font-weight: 700; color: var(--g0); }

/* Orarendben a napfejlec nem ragad (a nap-szuro sav a ragados) es nem kulon csik */
.orv .tp-gh { position: static; background: transparent; border-bottom: 0; border-left: 4px solid var(--brand); padding: 4px 0 4px 10px; }

/* Segedletek: ket oszlop - bal a dokumentumok, jobb a Gyakori linkek sav.
   A sav NEM onallo gorgeto (a .orv-scroll-lal egyutt gorog) - dupla scroll tilos. */
.docs-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.docs-main { order: 1; min-width: 0; }
.doc-links { order: 2; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 12px 14px 14px; }
.dl-title { font-weight: 800; font-size: .95rem; color: var(--ink); padding-bottom: 8px; border-bottom: 2px solid var(--line); }
/* A BLOKKOK legyenek első ránézésre elkülönültek: saját fejléc szín-pöttyel és darabszámmal,
   fölötte elválasztó vonal. Korábban egy 0,62 rem-es szürke felirat vitte a csoportokat, és
   a sáv egyetlen link-folyamnak látszott (2026-07-31 user-visszajelzés). */
.dl-group { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.dl-group:first-of-type { border-top: 0; padding-top: 4px; }
.dl-h { font-size: .78rem; font-weight: 800; letter-spacing: .01em; color: var(--ink); margin-bottom: 5px; display: flex; align-items: center; gap: 7px; }
/* blokkonként külön szín a pötyön - a színt a KOMPONENS adja a csoport indexéből, nem a
   CSS a DOM-sorrendből: a nth-of-type a köztes .dl-note miatt elcsúszott, és minden új
   elemnél újra elcsúszna. A piros KIMARAD, az ebben az appban az aktív/kiemelt elemé. */
.dl-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--brand); flex: none; }
.dl-n { font-size: .64rem; font-weight: 700; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
/* „Napi indítás" ikon a Rendszerek fejléc mellett: egy kattintás -> a napi felületek */
.dl-openall { flex: none; border: 1px solid color-mix(in srgb, var(--hot) 45%, var(--line)); background: var(--hot-100); border-radius: 999px; padding: 1px 8px; font-size: .82rem; line-height: 1.4; cursor: pointer; }
.dl-openall:hover { background: color-mix(in srgb, var(--hot) 22%, transparent); }
.dl-link { display: flex; align-items: flex-start; gap: 9px; padding: 7px 8px; border-radius: 9px; color: var(--ink); text-decoration: none; border: 1px solid transparent; }
.dl-link:hover { background: var(--brand-100); border-color: color-mix(in srgb, var(--brand) 28%, var(--line)); }
/* a Foglalás/kontakt tétel gomb: nézzen ki pontosan úgy, mint egy link-sor */
button.dl-link { width: 100%; text-align: left; font: inherit; -webkit-appearance: none; appearance: none; background: transparent; border: 0; cursor: pointer; }
.dl-copied { font-style: normal; font-weight: 700; color: var(--g0); font-size: .72rem; }
/* a 🚀 Napi indítás blokkolás-üzenete (engedélyezni kell a felugró ablakokat) */
.dl-note { font-size: .72rem; line-height: 1.4; color: var(--hot); background: var(--hot-100); border: 1px solid color-mix(in srgb, var(--hot) 35%, var(--line)); border-radius: 8px; padding: 6px 9px; margin: 6px 0; }
.dl-ic { width: 22px; text-align: center; flex: none; font-size: 1.02rem; line-height: 1.3; }
.dl-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dl-t { font-size: .82rem; font-weight: 700; line-height: 1.3; }
/* A leírás EL VOLT VÁGVA (nowrap + ellipszis), tehát adat veszett belőle. Mostantól tördel:
   a sáv magasabb lesz, cserébe minden információ olvasható (2026-07-31 user-kérés). */
.dl-d { font-size: .7rem; line-height: 1.35; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
.dl-open { margin-left: auto; padding-left: 6px; color: var(--muted); font-size: .75rem; align-self: center; }
@media (max-width: 900px) {
  /* mobilon/keskeny ablakban a linkpanel a tartalom ELE kerul, kompakt pill-sorokkent */
  .docs-cols { display: flex; flex-direction: column; }
  .doc-links { order: 1; }
  .docs-main { order: 2; }
  .dl-group { margin-top: 8px; }
  .dl-list { display: flex; flex-wrap: wrap; gap: 6px; }
  .dl-link { border: 1px solid var(--line); background: var(--paper); padding: 6px 10px; }
  button.dl-link { border: 1px solid var(--line); background: var(--paper); } /* a copy-gomb is pill legyen mobilon */
  .dl-d, .dl-open { display: none; }
}
/* A ragados savok teljes szelessegben takarjanak (ne latsszon at a gorgo tartalom a szeleken) */
.pmv .pm-toolbar { margin: 0 calc(-1 * var(--pad)) 6px; padding: 10px var(--pad) 10px; border-radius: 0; background: var(--paper); }
.pmv .mfoot { margin: 0 calc(-1 * var(--pad)); padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-radius: 0; }

/* a sablonpanelben az aktiv (betoltott) sablon kijelolve latszik */
.nm-titem.is-on { background: var(--hot); color: #fff; font-weight: 800; }
.nm-titem.is-on:hover { background: var(--hot); color: #fff; }

/* Nevjegyzek mobilon: minden szemely KULON KARTYA - latszik, hol kezdodik egy uj nev.
   Felul a teljes szelessegu, felkover nev; a torles gomb a jobb felso sarokban. */
@media (max-width: 720px) {
  .pm-rows { gap: 10px; }
  .pm-row5:not(.pm-head), .pm-row6:not(.pm-head) {
    position: relative; grid-template-columns: 1fr 1fr; gap: 6px;
    border: 1px solid var(--line-2); border-left: 4px solid var(--brand);
    border-radius: 10px; padding: 10px; background: var(--card);
  }
  /* a nev (input vagy fix felirat) az elso sorban, teljes szelessegben, hangsulyosan.
     OSZTALY szerint celozzuk, nem :first-child-dal: a sor elejere kerult nevjegy-masolo
     gomb kulonben eltorne ezt az elrendezest */
  .pm-row5:not(.pm-head) > .pm-nameinput,
  .pm-row6:not(.pm-head) > .pm-nameinput,
  .pm-row6:not(.pm-head) > .pm-name {
    grid-column: 1 / -1; font-weight: 800; font-size: .9rem; padding-left: 46px; padding-right: 40px;
  }
  .pm-row6 .pm-name { padding: 4px 40px 2px 46px; }
  /* a nevjegy-masolo BALRA (mint asztali nezetben a sor elejen), a torles JOBBRA:
     a ket gomb tavol egymastol, a destruktiv gomb nem esik a masolo melle */
  .pm-row5:not(.pm-head) .pm-del, .pm-row6:not(.pm-head) .pm-del { position: absolute; top: 8px; right: 8px; }
  .pm-row5:not(.pm-head) .pm-vcard, .pm-row6:not(.pm-head) .pm-vcard { position: absolute; top: 8px; left: 8px; }
  /* mobilon nagyobb koppintasi feluletek */
  .pm-mini { width: 34px; height: 34px; font-size: .88rem; }
  /* a statusz-valaszto teljes szelessegben a kartya aljan */
  .pm-row6:not(.pm-head) select { grid-column: 1 / -1; }
}

/* Egyseges, kenyelmes inputok: a csupasz .nm-search mezok es a nevjegyzek-sorok
   eddig bongeszo-alap (szogletes, keskeny) kinezetuek voltak */
.nm-search, .tp-grpsel {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font-family: var(--ff); font-size: .9rem; color: var(--ink); background: var(--paper);
  min-width: 0; transition: border-color .12s, background .12s;
}
.nm-search:focus, .tp-grpsel:focus { outline: 2px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: 1px; border-color: var(--brand); background: var(--card); }
.pm-row input, .pm-row6 select, .pm-group-head input { border-radius: 10px; padding: 9px 11px; font-size: .88rem; }
.pm-row input:focus, .pm-row6 select:focus { outline: 2px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: 1px; border-color: var(--brand); }

/* ---- MOBIL OLVASHATÓSÁG: nagyobb alap (html 20px) + minimum-méretek a kis szövegekre ----
   A rem-alapú szövegek a 20px-es alappal nőnek, a legapróbb címkék/chipek/metaszövegek
   pedig itt kapnak explicit padlót, hogy telefonon minden kényelmesen olvasható legyen.
   (A fájl végén áll, hogy a korábbi mobil-szabályokat felülírja.) */
@media (max-width: 720px) {
  /* kártyák: Feladatok / Események */
  .cc-name { font-size: 1.05rem; }
  .cc-desc { font-size: .84rem; }
  .ag-ideas li { font-size: .82rem; }
  .ag-smeta { font-size: .72rem; white-space: normal; }
  .ag-more { font-size: .72rem; }
  .cc-grp { font-size: .7rem; }
  .cc-tag, .ag-pp { font-size: .7rem; padding: 5px 10px; }
  .ag-prio, .ag-cat, .ag-doing { font-size: .68rem; padding: 5px 11px; }
  .ag-stepsum, .ag-mailsum { font-size: .74rem; padding: 5px 11px; }
  .ag-notify, .ev-task { font-size: .76rem; padding: 7px 12px; }
  .ag-scheck { width: 20px; height: 20px; font-size: .66rem; }
  .ag-intro p { font-size: .88rem; }
  .ag-person-sum { font-size: .82rem; }
  .ag-person-h { font-size: .66rem; }
  .ag-done-open { font-size: .84rem; }
  .ag-done-open .cat { font-size: .7rem; }
  .ag-done-open .pp { font-size: .74rem; }
  .pb { width: 16px; height: 16px; font-size: .58rem; }
  .chip { font-size: .82rem; padding: 8px 13px; }
  /* esemény-naptár */
  .cal-ev { font-size: .84rem; padding: 6px 4px; }
  .cal-ev .d { font-size: .74rem; }
  .cal-ev .h { font-size: .74rem; }
  .cal-ev .w { font-size: .7rem; }
  .cal-days .dd b { font-size: .74rem; }
  .cal-bar { height: 7px; }
  .cal-bar.ft { height: 8px; }
  /* MOBIL: a hajszálvékony színcsíkra és a ⚑-ra NEM lehet koppintani - a találat mindig
     a NAPRA megy (kiemelés + odagörgetés a hónap-listában). Ujjal a 7 px-es csíkot
     eltalálni véletlen szerkesztő-nyitást okozott. Asztali gépen minden marad:
     a csík kattintható és hoverre tooltipet ad. */
  .cal-days .dd .cal-bar, .cal-days .dd .cal-flag { pointer-events: none; }
  /* Levelek nézet */
  .tp-item .s { font-size: .88rem; }
  .tp-item .d { font-size: .74rem; white-space: normal; }
  .tp-ghbtn { font-size: .72rem; padding: 10px 12px; }
  .tp-pv-subj { font-size: .84rem; }
  .tp-pv-body { font-size: .9rem; }
  .tp-pv-hint, .tp-empty { font-size: .78rem; }
  /* órarend */
  .or-kd { font-size: .76rem; padding: 6px 10px; }
  .or-table { font-size: .8rem; }
  .or-table th { font-size: .66rem; }
  .orc-card { font-size: .8rem; }
  /* szerkesztő-modálok és levélíró */
  .field label { font-size: .7rem; }
  .f-sec { font-size: .8rem; }
  .mt-chip { font-size: .78rem; padding: 6px 12px; }
  .mt-lst { font-size: .7rem; }
  .mt-tst { font-size: .66rem; }
  .mt-task .t { font-size: .9rem; }
  .mt-task .m { font-size: .76rem; }
  .mt-letter-open .s, .nm-letter-load .s { font-size: .88rem; }
  .mt-letter-open .d, .nm-letter-load .d { font-size: .74rem; }
  .se-meta { font-size: .74rem; }
  .se-empty, .pp-nohit { font-size: .84rem; }
  .pp-selcount { font-size: .74rem; }
  .nm-hint { font-size: .68rem; width: 64px; }
  .nm-missing { font-size: .78rem; }
  .nm-preview .more { font-size: .74rem; }
  /* névjegyzék + IT / segédletek apróbetűi */
  .pm-former { font-size: .64rem; }
  .it-sw-vars, .it-room-pc { font-size: .76rem; }
  .it-doc-sum summary, .it-swlist summary { font-size: .8rem; }
}
@media (max-width: 720px) {
  /* mobilon 16px betu: kenyelmes es az iOS sem zoomol ra */
  .nm-search, .tp-grpsel, .pm-row input, .pm-row6 select, .pm-group-head input { font-size: max(16px, calc(16px * var(--md-fskala, 1))); padding: 11px 12px; }
}

/* Eszkoztar-elrendezes: a kereso MINDIG a jobb felso sarokban, a fomenu mellett;
   a BA/MA + evvalaszto es minden mas a kovetkezo sorban kezdodik */
.toolbar-break { flex-basis: 100%; height: 0; }
/* a kereso wrapper viszi a sarok-elrendezest; benne a mezo + az ✕ torlogomb */
.search-wrap { position: relative; display: flex; margin-left: auto; flex: 0 1 420px; min-width: 0; }
.search-wrap .search--corner { flex: 1 1 auto; width: 100%; max-width: none; padding-right: 30px; }
/* a type="search" natív webkit ✕-e ütközne a saját .search-clear gombunkkal */
.search::-webkit-search-cancel-button, .search::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-clear {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-2);
  font-size: .78rem; line-height: 1; cursor: pointer;
}
.search-clear:hover { background: var(--paper-2); color: var(--ink); }
@media (max-width: 900px) {
  /* mobilon a kereso es a ☰ gomb EGY sort oszt meg (a sortores csak asztali nezethez kell) */
  .toolbar-break { display: none; }
  .search-wrap { margin-left: 0; flex: 1 1 auto; }
}

/* ---- IT es szoftverek nezet ---- */
/* ---- Szak-szabályok: két oszlop (oktatói / hallgatói), egyelőre listák ---- */
.szv-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; align-items: start; padding-bottom: 26px; }
.szv-col { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; --col-c: var(--brand); }
.szv-col--kozos { --col-c: var(--brand); }
.szv-col--okt { --col-c: var(--g1); }
.szv-col--hall { --col-c: var(--g0); }
.szv-col-h { display: flex; align-items: center; gap: 9px; margin: 0; padding: 13px 16px; font-family: var(--ff-display); font-size: 1.02rem; font-weight: 700; letter-spacing: var(--head-ls); color: var(--ink); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--col-c) 8%, var(--paper-2)); }
.szv-col-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--col-c); flex: none; }
.szv-col-n { margin-left: auto; font-family: var(--ff); font-size: .72rem; font-weight: 700; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.szv-list { margin: 0; padding: 12px 16px 14px 42px; }
.szv-item { font-size: .92rem; line-height: 1.55; color: var(--ink); margin: 0 0 10px; padding-left: 5px; }
.szv-item:last-child { margin-bottom: 0; }
.szv-item::marker { color: var(--col-c); font-weight: 700; }
.szv-item-t { display: inline; }
/* szerkeszthető szöveg: finom jelzés, hogy kattintható (szerkesztő módban) */
.szv-item-t--edit { cursor: text; border-radius: 4px; padding: 0 2px; margin: 0 -2px; transition: background .12s, box-shadow .12s; }
.szv-item-t--edit:hover { background: color-mix(in srgb, var(--col-c) 10%, transparent); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--col-c) 45%, transparent); }
/* helyben szerkesztő mező */
.szv-edit { flex: 1 1 auto; min-width: 0; width: 100%; border: 1px solid var(--col-c); border-radius: 8px; padding: 5px 9px; font-size: .92rem; line-height: 1.4; font-family: var(--ff); color: var(--ink); background: var(--card); }
.szv-edit:focus { outline: 2px solid color-mix(in srgb, var(--col-c) 35%, transparent); outline-offset: 1px; }
/* törlés-gomb: a sor végén, halványan, hoverre piros (destruktív) */
.szv-del { margin-left: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper-2); color: var(--muted); font-size: .72rem; line-height: 1; padding: 2px 6px; cursor: pointer; vertical-align: 1px; }
.szv-del:hover { background: var(--hot); border-color: var(--hot); color: #fff; }
.szv-empty { margin: 0; padding: 20px 18px; font-size: .86rem; color: var(--muted); line-height: 1.55; }
/* hozzáadás-sor a fejléc ALATT, fix helyen (csak szerkesztő módban) - a lista alatta nő,
   így mobilon nem kell a lista aljára görgetni új tétel felviteléhez */
.szv-add { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--col-c) 4%, var(--card)); }
.szv-add input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; font-size: .9rem; font-family: var(--ff); color: var(--ink); background: var(--paper); }
.szv-add input:focus { outline: 2px solid color-mix(in srgb, var(--col-c) 35%, transparent); outline-offset: 1px; border-color: var(--col-c); background: var(--card); }
.szv-add .btn { flex: none; }
.szv-msg { margin: 0 0 12px; font-size: .85rem; color: var(--hot); font-weight: 600; }

/* EGY SZEMELY = EGY REKORD (2026-08-04): osszefesules-jelzo + utkozes-lista.
   Eddig ugyanaz az ember tobb listaban KULON rekord volt, elteroen kitoltve. */
.pm-merge { margin: 0 0 12px; padding: 10px 13px; border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-left: 4px solid var(--brand); border-radius: 10px; background: color-mix(in srgb, var(--brand) 5%, var(--card)); }
.pm-merge-h { font-size: .82rem; line-height: 1.5; color: var(--ink-2); }
.pm-merge-d { margin-top: 7px; }
.pm-merge-d summary { cursor: pointer; font-size: .8rem; font-weight: 700; color: var(--hot); }
.pm-merge-d ul { margin: 7px 0 0; padding-left: 20px; }
.pm-merge-d li { font-size: .78rem; line-height: 1.5; color: var(--ink-2); margin-bottom: 3px; }
.pm-merge-d em { font-style: normal; color: var(--muted); }
.pm-merge-p { margin: 6px 0 0; font-size: .76rem; line-height: 1.5; color: var(--muted); }
/* tobb listaban szereplo szemely sora: bal szelen jelolo - NEM pszeudoelem, mert a
   sor grid, es egy ::before/::after uj racscellat foglalna es szetcsuszna a sor */
.pm-row--sok { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--brand) 60%, transparent); border-radius: 6px; }

/* Globalis kereses-sav (2026-08-04): a felso kereso talalatai NEZETENKENT, egy
   kattintassal atugorhatoan. A sav a viewport tetejen, minden nezet folott ul. */
.xsearch { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 4px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--brand) 5%, var(--paper-2)); }
.xsearch-l { font-size: .78rem; font-weight: 700; color: var(--ink-2); margin-right: 2px; }
.xsearch-none { font-size: .78rem; color: var(--muted); }
.xsearch-b { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font-family: var(--ff); font-size: .76rem; font-weight: 700; padding: 4px 10px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.xsearch-b:hover { border-color: var(--brand); color: var(--ink); }
.xsearch-b.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.xsearch-n { font-size: .68rem; font-weight: 800; color: var(--muted); background: var(--paper-2); border-radius: 999px; padding: 1px 6px; }
.xsearch-b.is-on .xsearch-n { color: var(--brand-text, var(--ink)); background: #fff; }

/* Szak-szabalyok TEMAK (2026-08-04): a lista megnott, egy uj temablokk (pl. ERASMUS)
   elveszett a folyamatos felsorolasban. A temat a tetel "TEMA - CIM:" eloltagjabol
   olvassuk ki, a szin temahoz kotott es mind a harom oszlopban ugyanaz. */
.szv-temak { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.szv-tchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font-family: var(--ff); font-size: .76rem; font-weight: 700; letter-spacing: .02em; padding: 5px 11px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.szv-tchip:hover { border-color: var(--tema-c, var(--brand)); color: var(--ink); }
.szv-tchip.is-on { background: color-mix(in srgb, var(--tema-c, var(--brand)) 14%, var(--card)); border-color: var(--tema-c, var(--brand)); color: var(--ink); }
.szv-tchip-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--tema-c, var(--brand)); flex: none; }
.szv-tchip-n { font-size: .68rem; font-weight: 800; color: var(--muted); background: var(--paper-2); border-radius: 999px; padding: 1px 6px; }
.szv-tchip.is-on .szv-tchip-n { color: var(--ink-2); background: var(--card); }

/* temablokk az oszlopon belul: sav-fejlec + a hozza tartozo tetelek */
.szv-grps { padding: 4px 0 10px; }
.szv-grp + .szv-grp { border-top: 1px solid var(--line); }
.szv-grp-h { display: flex; align-items: center; gap: 8px; margin: 0; padding: 11px 16px 5px; font-family: var(--ff); font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.szv-grp-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--tema-c, var(--line-2)); flex: none; }
.szv-grp-n { margin-left: auto; font-size: .66rem; font-weight: 800; color: var(--muted); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; letter-spacing: 0; }
.szv-grp .szv-list { padding: 4px 16px 10px 42px; }
/* a felsorolas-jelolo es a tetel CIME a temaszinnel - igy a blokk egyben olvashato */
.szv-grp .szv-item::marker { color: var(--tema-c, var(--col-c)); }
/* 2026-08-10 (user-kérés): a szabály CÍME EGY SORBAN áll a sorszámmal. Eddig `display:block`
   volt, ami kitörte a saját sorába, így a lista sorszáma külön sorban árválkodott a cím fölött.
   Inline + kettőspont-elválasztó: „1. TÉMA-CÍM: a szabály szövege…". */
.szv-item-c { display: inline; font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--tema-c, var(--col-c)) 72%, var(--ink)); }
.szv-item-c::after { content: ':'; margin-right: 5px; }
@media (max-width: 720px) {
  .szv-cols { grid-template-columns: 1fr; gap: 14px; }
  /* MOBIL: a fejléc egy teljes szélességű nyitó-gomb, a három lista alapból csukva */
  .szv-col-toggle { display: flex; width: 100%; appearance: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; padding: 15px 16px; }
  .szv-col.is-closed .szv-col-toggle { border-bottom: 0; }
  .szv-col-chev { margin-left: 10px; font-size: .8rem; color: var(--ink-2); }
}

.it-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 26px; }
.it-room { padding: 13px 15px; cursor: default; }
/* MD-KIEMELÉS: a Média Design órarendjében szereplő termek (piros = kiemelt, szabály) */
.it-room.is-md { border-left: 3px solid var(--hot); }
.it-md-badge { font-size: .62rem; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--hot); border-radius: 5px; padding: 2px 6px; align-self: center; }
.it-sw-rooms .cc-tag.is-md { border-color: color-mix(in srgb, var(--hot) 55%, transparent); color: var(--hot); font-weight: 700; }
.it-room-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.it-room-no { font-family: var(--ff-display); font-weight: 800; font-size: 1.15rem; color: var(--brand-text); }
.it-room-type { font-weight: 600; font-size: .86rem; }
.it-room-pc { margin-left: auto; font-size: .74rem; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.it-hits { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.it-hit { background: var(--brand); color: #fff; border-color: var(--brand); }
.it-swlist { margin-top: 8px; }
.it-swlist summary { cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.it-swlist summary:hover { color: var(--brand-text); }
.it-swlist ul { margin: 7px 0 2px; padding-left: 19px; font-size: .8rem; line-height: 1.55; columns: 2; column-gap: 18px; }
.it-swgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 26px; }
.it-sw { padding: 11px 13px; cursor: default; }
.it-sw-name { font-weight: 700; font-size: .9rem; }
.it-sw-vars { font-size: .72rem; color: var(--ink-2); margin-top: 2px; }
.it-sw-rooms { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.it-doch { margin-top: 6px; }
.it-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin: 10px 0 22px; align-items: start; }
.it-docwrap { padding: 0; display: flex; flex-direction: column; cursor: default; }
.it-docwrap:hover { border-color: var(--brand); }
.it-doc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: inherit; }
.it-doc:hover .it-doc-title { color: var(--brand-text); }
/* masodlagos link: a szerkesztheto eredeti (docx/xlsx) letoltese a kartyan */
.it-doc-orig { display: block; padding: 7px 14px; font-size: .74rem; font-weight: 700; color: var(--brand-text); text-decoration: none; border-top: 1px dashed var(--line); }
.it-doc-orig:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, transparent); }
/* kivonat: a PDF lenyege kattinthato linkekkel, lenyithato blokkban */
.it-doc-sum { border-top: 1px dashed var(--line); padding: 8px 14px 12px; }
.it-doc-sum summary { cursor: pointer; font-size: .76rem; font-weight: 700; color: var(--ink-2); padding: 3px 0; }
.it-doc-sum summary:hover { color: var(--brand-text); }
.it-doc-sum ul, .it-doc-sum ol { margin: 8px 0 2px; padding-left: 20px; font-size: .8rem; line-height: 1.6; display: flex; flex-direction: column; gap: 6px; }
.doc-link { color: var(--brand-text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.doc-link:hover { color: var(--brand); }
/* nev-gomb a kivonatban: a Nevjegyzekre ugrik (nem mailto) */
.doc-person { border: 0; background: transparent; padding: 0; font: inherit; cursor: pointer; white-space: nowrap; }
.it-doc-icon { font-size: 1.5rem; flex: none; }
.it-doc-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.it-doc-title { font-weight: 700; font-size: .87rem; }
.it-doc-desc { font-size: .74rem; color: var(--ink-2); line-height: 1.4; }
.it-doc-open { margin-left: auto; flex: none; font-size: .72rem; font-weight: 700; color: var(--brand-text); white-space: nowrap; }
@media (max-width: 720px) { .it-swlist ul { columns: 1; } .it-doc-open { display: none; } }

/* Google Meet gomb az esemenykartyan */
.ev-task.meet { border-color: color-mix(in srgb, #0e7f4f 45%, var(--line)); color: #0e7f4f; font-weight: 700; }
.ev-task.meet:hover { background: #0e7f4f; border-color: #0e7f4f; color: #fff; }
html[data-theme='dark'] .ev-task.meet { color: #34d399; border-color: color-mix(in srgb, #34d399 40%, var(--line)); }
html[data-theme='dark'] .ev-task.meet:hover { background: #0e7f4f; color: #fff; }

/* Mobil: a nevjegyzek/orarend szuro-chipek EGYETLEN vizszintesen gorgetheto sorban,
   kulonben a 15 chip 5-6 sorba torve a fel kepernyot elfoglalja es a tartalom nem latszik */
@media (max-width: 720px) {
  .pm-secpick, .or-tools .cat-picker {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 4px 0 6px;
  }
  .pm-secpick::-webkit-scrollbar, .or-tools .cat-picker::-webkit-scrollbar { display: none; }
  .pm-secpick .chip, .pm-secpick .tp-grpsel, .or-tools .chip { flex: none; white-space: nowrap; }
  .pmv .pm-toolbar { padding: 8px var(--pad) 6px; }
  .pmv .mfoot { padding: 8px var(--pad) calc(8px + env(safe-area-inset-bottom)); }
}

/* mentes-visszajelzes az eszkozsorban */
.save-msg { font-size: .72rem; font-weight: 700; color: var(--danger); }
.save-msg.ok { color: var(--g0); }

/* automentes-allapot chip (toolbar) - a nema mentesi hibak lathatova tetele */
.autosave-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: var(--muted); white-space: nowrap; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.autosave-chip.ok { color: var(--g0); border-color: color-mix(in srgb, var(--g0) 40%, var(--line)); }
.autosave-chip.err { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.autosave-chip .chip-retry { border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font-size: .68rem; font-weight: 800; padding: 1px 8px; cursor: pointer; }
.autosave-chip .chip-retry:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

/* KITOLTO-PANEL a levelszerkeszto jobb oldalan: a levelben maradt [szogletes]
   mezok kis inputokkal toltehok - Enter/pipa a targy ES torzs MINDEN
   azonos mezojebe beirja az erteket */
.nm-fill { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 10px 12px 12px; }
.nm-fillrow { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.nm-fillrow .t { flex: none; width: 88px; font-size: .68rem; font-weight: 700; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-fillrow input { flex: 1; min-width: 0; padding: 6px 8px; font-size: .8rem; }
.nm-fillrow input.nm-filltime { flex: 0 0 86px; }
/* élő kitöltés: zöld keret = az érték már a levélben van; áthúzott = kihagyva */
.nm-fillrow.is-ok input { border-color: var(--g0); }
.nm-fillrow.is-ok .t { color: var(--g0); }
.nm-fillrow.is-dead .t { text-decoration: line-through; color: var(--muted); }
.nm-filldead { flex: 1; font-size: .74rem; color: var(--muted); font-style: italic; }
.nm-fillgo { flex: none; padding: 5px 9px; color: var(--muted); }
.nm-fillgo:hover { border-color: var(--hot); color: var(--hot); }
.nm-fillgo.nm-fillback:hover { border-color: var(--g0); color: var(--g0); }
.nm-outprev { margin-top: 5px; font-size: .76rem; color: var(--ink-2); background: color-mix(in srgb, var(--brand) 7%, transparent); border-radius: 8px; padding: 5px 9px; }
/* POSTA nézet - válaszra váró bejövő levelek listája, lenyitható választervekkel.
   Egy sor = egy levél: dátum + feladó + tárgy, alatta EGY mondat arról, mire válaszolunk. */
.po-list { display: flex; flex-direction: column; gap: 8px; }
/* a sor bal színcsíkja a SÁVOT kódolja: piros csak a Visszatért (figyelem!),
   meleg sárga a Határidős, szürke a többi, zöld ahol már mi léptünk */
/* 2026-08-10 (user-jelzés: "az oldalsáv színe nem jó"): a zavaros ink-keverék helyett a
   rendszer szabálya - szürke alap (--brand), nyitva PIROS (--hot = aktív elem). A csukott
   sor egészében kattintható, ezt a kurzor is jelzi. */
.po-row { border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 10px; background: var(--card); overflow: hidden; transition: border-color .2s, border-left-color .2s, box-shadow .2s; }
.po-row:not(.is-open) { cursor: pointer; }
.po-row:not(.is-open):hover { border-color: var(--line-2); border-left-color: var(--hot); box-shadow: 0 2px 10px rgba(16, 17, 20, .06); }
.po-row.is-open { border-left-color: var(--hot); box-shadow: 0 6px 18px rgba(16, 17, 20, .08); }
/* KÉT OSZLOP a soron belül (2026-08-10, user-terv): balra dátum+óra oszlop, jobbra a
   tartalom. Az oszlop a nyitott sorban is fent marad - időbélyeg-sín a doboz mellett. */
.po-rowgrid { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 8px; padding: 0; }
/* 2026-08-12 (user: "a datumok mellett bal oldalt nagy a padding"): a bal terkoz 12->4px, az oszlop 64px */
.po-datumcol { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 12px 0 0 4px; text-align: right; }
.po-datumcol b { font-size: .84rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.po-datumcol span { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.po-tartcol { min-width: 0; }
/* a regi inline datum-mezo (ha maradt fogyasztoja) es a fejlec igazitasa */
.po-main .d { display: none; }
@media (max-width: 720px) {
  .po-rowgrid { grid-template-columns: 52px minmax(0, 1fr); gap: 0 8px; }
  .po-datumcol { padding: 12px 0 0 2px; }
  .po-datumcol b { font-size: .76rem; }
}
.po-lane--returned .po-row { border-left-color: var(--hot); }
.po-lane--deadline .po-row { border-left-color: var(--yellow-deep); }
.po-lane--waiting .po-row { border-left-color: var(--g0); }
/* 2026-08-10 (user-kérés): a kategóriák (sávok) közé elválasztó vonal; a sáv-fejléc
   mobilon KÖZÉPRE igazítva, nagyobb margókkal */
/* 2026-08-19: a fajl kesobbi pontjan volt egy masodik .po-lane definicio - osszevonva, a szamitott allapot valtozatlan. */
/* Amit a masodik blokk feluldefinialt, az ide beolvadt (gap 14 -> 8, margin-top 30 -> 16);
   a padding-top es a border-top csak itt volt, azok valtozatlanok. A mobil blokkbol a
   gap:22px es a margin-top:38px KIESETT, mert oket is feluldefinialta a mara torolt
   kesobbi blokk (tehat mar eddig sem ervenyesultek); a padding-top:30px viszont elt, marad. */
.po-lane { display: flex; flex-direction: column; gap: 8px; }
.po-lane + .po-lane { margin-top: 16px; padding-top: 24px; border-top: 2px solid var(--line-2); }
@media (max-width: 720px) {
  .po-lane + .po-lane { padding-top: 24px; }
  .po-lane-h { justify-content: center; text-align: center; flex-wrap: wrap; margin: 8px 16px 16px; font-size: 1.02rem; }
  .po-lane-h .hint { width: 100%; text-align: center; }
}
.po-lane-h .dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; background: color-mix(in srgb, var(--ink) 25%, transparent); }
/* radar-luktetes a figyelmet kero savok pottyen (2026-08-12, user: "villogjon a hatarido
   elotti meg a harmadik fel elotti kis potty") - a nyugodt savok NEM luktetnek */
@keyframes poPingHot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hot) 55%, transparent); } 75%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes poPingWarn { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--yellow-deep) 60%, transparent); } 75%, 100% { box-shadow: 0 0 0 7px transparent; } }
.po-lane--returned .po-lane-h .dot { background: var(--hot); animation: poPingHot 1.8s ease-out infinite; }
.po-lane--deadline .po-lane-h .dot { animation: poPingWarn 1.8s ease-out infinite; }
/* 2026-08-19: a fwdwait pötty NEM lüktet - ott a megkérdezett kolléga lép, nem a
   felhasználó; a lüktetés a returned/deadline sávok jelzése marad */
.po-lane--fwdwait .po-lane-h .dot { background: var(--fwd); }
@media (prefers-reduced-motion: reduce) {
  .po-lane--returned .po-lane-h .dot, .po-lane--deadline .po-lane-h .dot { animation: none; width: 10px; height: 10px; }
}
.po-lane--deadline .po-lane-h .dot { background: var(--yellow-deep); }
.po-lane--waiting .po-lane-h .dot { background: var(--g0); }
/* HARMADIK FÉLNÉL: saját kategória-szín - a kérdés a kollégánál van, én még nem léphetek.
   2026-08-09: a szín a --hot skálájának mély bordója volt (a narancs és a lila elvetve).
   2026-08-19 (user-döntés): a bordó a piros CSALÁDJÁBAN maradt, ezért ránézésre "rám vár"-nak
   olvasódott. Az új szín a --fwd nyugodt kék: ott NEM a felhasználó lép. */
.po-lane--fwdwait .po-row { border-left-color: var(--fwd); }
.po-lane--fwdwait .po-lane-h .dot { background: var(--fwd); }
.po-lane--fwdwait .po-lane-h { color: var(--fwd); }
html[data-theme='dark'] .po-lane--fwdwait .po-lane-h { color: var(--fwd); }
.po-main { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px 4px; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; color: var(--ink); }
.po-main .d { flex: none; font-size: .72rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--brand) 9%, transparent); border-radius: 8px; padding: 2px 8px; }
.po-main .n { flex: none; font-weight: 800; }
/* gyujtoszal: a targy a cim (2026-08-12) - torhet, hogy elferjen */
.po-main .po-n--szal { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .po-main .po-n--szal { white-space: normal; } }
.po-main .s { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.po-main .cc { flex: none; font-size: .72rem; color: var(--brand-text); }
/* FIX szelessegu +/- nyit/csuk jelzes (2026-08-12, user: "igy nem pattog a cim") */
.po-main .x { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; margin-left: auto; font-size: 1.02rem; font-weight: 800; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; transition: color .2s, border-color .2s; }
.po-row:hover .po-main .x { color: var(--hot); border-color: var(--hot); }
.po-row.is-open .po-main .x { color: var(--hot); border-color: var(--hot); }
.po-gist { display: flex; align-items: baseline; gap: 12px; padding: 2px 12px 12px; font-size: .84rem; line-height: 1.45; color: var(--ink-2); }
/* a max-width SZAZALEKBAN nem korlatoz: a bongeszo a min-content szamitasnal figyelmen kivul
   hagyja, igy a nowrap felirat teljes szelessege lett a szulo also korlatja - mobilon ettol
   feszult 592px-re a 390px-es Titkarno-panel (2026-08-01, kimerve). A ch fix egyseg, ez fog. */
.po-card { flex: 0 1 auto; min-width: 0; margin-left: auto; border: 0; background: none; padding: 0; font: inherit; font-size: .76rem; color: var(--brand-text); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; white-space: nowrap; max-width: min(34ch, 100%); overflow: hidden; text-overflow: ellipsis; }
/* animalt lenyilas (2026-08-12, user: "a lenyilas lehetne animalt kisse") */
@keyframes poNyil { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.po-drafts { border-top: 1px solid var(--line); padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, var(--brand) 3%, var(--card)); animation: poNyil .3s ease-out; }
.po-draft--ful { animation: poNyil .15s ease-out; }
@keyframes poCsuk { to { opacity: 0; transform: translateY(-8px); } }
.po-drafts.is-zaro { animation: poCsuk .24s ease-in forwards; }
@media (prefers-reduced-motion: reduce) { .po-drafts, .po-draft--ful, .po-drafts.is-zaro { animation: none; } }
/* ── Posta-sor optimalizálás (2026-08-12, user: "túl sok minden, duplikálva, óriási
   paddingok") - két tömör blokk, minimál fejlécekkel ── */
.po-blokk-h2 { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
/* 2026-08-12 (user: "a dupla-vertikal gorgetes nagyon zavaro"): NINCS belso gorgetes,
   a szal teljes magassagaban kiterul, csak az oldal gorog */
.po-szal-wrap { padding-right: 2px; }
.po-szalnyit { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 12px; font: inherit; font-size: .84rem; font-weight: 800; color: var(--ink); background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.po-szalnyit svg { width: 16px; height: 16px; }
/* VÁLASZTERV-FÜLEK - ALÁHÚZÁSOS FÜLEK (2026-08-19, designrendszer S3).
   Eddig minden fül KERETES pill volt (paper-2 tónus + 1px keret + felső lekerekítés) egy
   olyan kártyán BELÜL, aminek már van kerete - ettől lett a nyitott sor keret-a-keretben.
   Az új alak a `.viewtoggle` bevált mintája: átlátszó háttér, keret nélkül, és az aktív
   fület egy 3px-es alsó jelzősáv mutatja (a szín továbbra is a terv szándéka).
   A fülsor alatti hajszálvonal viszi a "füles" olvasatot, a fülek -1px-szel ráülnek. */
.po-fulcso { display: flex; flex-direction: column; gap: 0; }
.po-fulek { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.po-ful { padding: 8px 12px; min-height: 38px; margin-bottom: -1px; font: inherit; font-size: .84rem; font-weight: 700; color: var(--ink-2); background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; cursor: pointer; }
.po-ful:hover { color: var(--ink); border-bottom-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.po-ful.is-on { color: var(--ink); background: none; font-weight: 800; border-bottom-color: var(--brand); }
.po-ful--0.is-on { border-bottom-color: var(--g0); }
.po-ful--1.is-on { border-bottom-color: var(--yellow-deep); }
.po-ful--2.is-on { border-bottom-color: var(--g1); }
.po-ful--kesz { color: var(--g0); }
.po-ful--kesz.is-on { border-bottom-color: var(--g0); background: none; color: var(--g0); }
.po-ful--kesz svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.po-ful--uj { color: var(--muted); border-bottom: 3px dashed var(--line-2); }
/* 2026-08-12 (user-keres): a ful alatti doboz a fulek BAL szelenel induljon es kapjon kis
   felso terkozt. A .po-fulcso-s szelektor SPECIFIKUSABB, mint a lejjebb allo .po-draft
   { margin-left: 14px } es a mobil 6px - a "kesobbi szabaly nyer" csapda igy nem fog. */
.po-fulcso .po-draft--ful { margin-left: 0; margin-top: 8px; border-radius: 8px; }
.po-draft--kesz { border-left-color: var(--g0); background: color-mix(in srgb, var(--g0) 5%, var(--card)); }
.po-draft--kesz .po-draft-h .l { color: var(--g0); font-weight: 800; }
/* kompakt döntés-gombsor + ⓘ magyarázat */
.po-dontsor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.po-dontsor .btn { min-height: 38px; }
.po-dontinfo-b { min-height: 38px; min-width: 38px; padding: 4px 12px; font: inherit; font-size: .92rem; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.po-dontinfo-b:hover { color: var(--hot); border-color: var(--hot); }
.po-dontinfo { font-size: .76rem; line-height: 1.55; color: var(--ink-2); padding: 8px 12px; background: var(--paper-2); border-radius: 8px; }
.po-dontinfo b { color: var(--ink); }
/* a fejléc ZÖLD kész-válasz gombja - koppintható, nem címke */
.po-badge--kesz { color: #fff; background: var(--g0); border: 0; font-weight: 800; cursor: pointer; padding: 4px 12px; }
.po-badge--kesz svg { stroke: #fff; width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.po-badge--kesz:hover { filter: brightness(1.08); }
/* a gist szövege csukott soron 2 sorra vágva (a gombok látszanak, mert külön elemek) */
.po-row:not(.is-open) .po-gist-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* a MailQuestion ikon a jelvényeken és a szál-csipeken */
.po-badge--var svg, .szt-mq { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
.po-mq { width: 14px; height: 14px; vertical-align: -2px; }
/* A NYITOTT SOR HÁROM SZEKCIÓJA (2026-08-10, user: "nem érteni mi-micsoda"). A szám-jelvény
   szürke (--brand) a rendszer szabálya szerint; a szövege --card, mert így világos ÉS sötét
   témán is kontrasztos marad (fehér a sötét téma világosabb szürkéjén már nem lenne az). */
.po-blokk { display: flex; flex-direction: column; gap: 8px; }
.po-blokk + .po-blokk { border-top: 1px solid var(--line-2); padding-top: 12px; margin-top: 2px; }
.po-blokk-h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .92rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.po-blokk-sz { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: var(--card); font-size: .76rem; font-weight: 800; flex: none; }
.po-blokk-h em { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .84rem; color: var(--muted); }
.po-speed-l { font-size: .76rem; color: var(--muted); }
.po-tocc b { color: var(--ink); font-weight: 700; }
/* DÖNTÉS-SOROK (2026-08-10): minden döntés kiírja a következményét, mert a tooltip
   mobilon nem létezik. Egy oszlop mobilon, 860px felett kettő; a halasztás-sor átér. */
.po-csuk { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 8px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); font: inherit; font-size: .84rem; font-weight: 800; color: var(--ink-2); cursor: pointer; transition: border-color .15s, color .15s; }
.po-csuk:hover { border-color: var(--hot); color: var(--hot); }
.po-csuk svg { width: 18px; height: 18px; }
@media (max-width: 720px) {
  /* mobilon minden döntés-gomb ujjbegy-méretű. A min-height azért van kiírva, mert a
     padding-alapú méret 37px körül állt volna meg. */
  .po-blokk-h { font-size: .92rem; }
  .po-blokk + .po-blokk { padding-top: 16px; }
}
.po-note { font-size: .76rem; color: color-mix(in srgb, var(--yellow-deep) 75%, var(--ink)); background: color-mix(in srgb, var(--yellow-deep) 9%, transparent); border-radius: 8px; padding: 8px 12px; }
.po-draft { border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px; background: var(--card); overflow: hidden; margin-left: 16px; }
@media (max-width: 720px) { .po-draft, .po-draft--gen { margin-left: 8px; } }
.po-draft--0 { border-left-color: var(--g0); }
.po-draft--1 { border-left-color: var(--yellow-deep); }
.po-draft--2 { border-left-color: var(--g1); }
/* a diktált döntésből megfogalmazott VÉGLEGES terv - ez a kiemelt elem */
.po-draft--gen { border-left-color: var(--hot); margin-left: 16px; }
.po-draft--gen .po-draft-h .l { color: var(--hot); background: color-mix(in srgb, var(--hot) 10%, transparent); }

/* TITKÁRNŐ-WIZARD: egyszerre egy levél, KÜLÖN képernyős lépések (1/3 - 2/3 - 3/3) */
/* min(760px, 100%) + min-width: 0 mindenhol: egyetlen tordelhetetlen felirat se feszithesse
   a panelt a kepernyonel szelesebbre (a .catalog vizszintesen VAG, tehat a tulnyulo szoveg
   nem gorgetheto, hanem eltunik) */
.po-wiz { display: flex; flex-direction: column; gap: 16px; max-width: min(760px, 100%); min-width: 0; margin: 0 auto; }
.po-wiz-prog { display: flex; align-items: center; gap: 12px; font-size: .84rem; color: var(--ink-2); font-weight: 700; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.po-wiz-prog .sp { flex: 1; }
.po-wiz-prog .stepname { text-transform: uppercase; letter-spacing: .04em; }
.po-wiz-dots { display: inline-flex; gap: 4px; align-items: center; }
.po-wiz-dots .dt { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.po-wiz-dots .dt.on { background: var(--hot); }
.po-wiz-dots .dt.done { background: var(--g0); }
.po-modetgl { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.po-modetgl button { border: 0; background: var(--card); padding: 4px 12px; cursor: pointer; font-size: .92rem; }
.po-modetgl button.is-on { background: var(--ink); color: var(--paper); }
/* mód-választó: két nagy kártya-gomb */
.po-modepick { max-width: 640px; margin: 24px auto; display: flex; flex-direction: column; gap: 16px; }
.po-modepick-h { font-size: 1.02rem; font-weight: 800; text-align: center; }
.po-modepick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.po-modebtn { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 130px; padding: 16px 16px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; font: inherit; color: inherit; text-align: center; }
.po-modebtn:hover { border-color: var(--ink); box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.po-modebtn.is-last { border-color: var(--hot); }
.po-modebtn .ic { font-size: 30px; }
.po-modebtn .t { font-weight: 800; font-size: 1.02rem; }
.po-modebtn .d { font-size: .76rem; color: var(--ink-2); line-height: 1.45; }
.po-modebtn .last { font-size: .72rem; color: var(--hot); font-weight: 700; }
/* F2 (2026-08-06): válasz-kör kérdés - nagy, koppintható döntés-gombok; a jóváhagyó
   kör (F3) is ezt a gombstílust használja (.is-big) */
.po-scope { margin: 8px 0 12px; }
.po-scope-q { font-weight: 700; font-size: .92rem; margin-bottom: 8px; }
.po-scope-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.po-scopebtn { flex: 1 1 220px; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: inherit; cursor: pointer; font: inherit; font-size: .92rem; text-align: left; }
.po-scopebtn:hover { border-color: var(--ink); }
.po-scopebtn.is-on { border-color: var(--hot); box-shadow: inset 0 0 0 1px var(--hot); font-weight: 700; }
.po-scopebtn.is-big { min-height: 60px; font-size: 1.02rem; text-align: center; }
/* F3 (2026-08-06): jóváhagyó kör - a kész válasz teljes szövege + nagy döntés-gombok */
.po-review .po-draft-b { white-space: pre-wrap; }
.po-review-ask { margin: 12px 0; }
.po-review-fix { margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
/* lucide ikonok (2026-08-07): emoji helyett vonalas SVG az EGÉSZ appban - szövegsorba
   igazítva, a currentColor miatt téma-követő */
svg.lucide { width: 14px; height: 14px; vertical-align: -2px; flex: 0 0 auto; }
.po-scopebtn svg.lucide, .po-modebtn svg.lucide { width: 16px; height: 16px; }
.po-modebtn .ic svg.lucide { width: 26px; height: 26px; }
/* Tudakozó (2026-08-06): kereső + kijelölhető találatok - a kijelöltek a megfogalmazásba mennek */
.po-tud { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); margin: 8px 0 12px; }
.po-tud-row { display: flex; gap: 8px; }
.po-tud-q { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font: inherit; font-size: .92rem; background: var(--paper); color: inherit; }
.po-tud-q:focus { outline: none; border-color: var(--ink); }
.po-tud-hits { display: flex; flex-direction: column; gap: 8px; }
.po-tud-hit { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.po-tud-hit.is-on { border-color: var(--hot); box-shadow: inset 0 0 0 1px var(--hot); }
.po-tud-pick { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.po-tud-pick .l { font-size: .84rem; font-weight: 700; }
.po-tud-hit .t { font-size: .76rem; color: var(--ink-2); margin-top: 4px; line-height: 1.45; }
.po-tud-count { font-size: .84rem; font-weight: 700; color: var(--hot); }
.po-tud-answer { border: 1.5px solid var(--hot); border-radius: 10px; background: color-mix(in srgb, var(--hot) 5%, var(--card)); }
.po-tud-answer-h { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid color-mix(in srgb, var(--hot) 30%, var(--line)); }
.po-tud-answer-h .l { font-size: .76rem; font-weight: 800; color: var(--hot); }
.po-tud-answer-b { padding: 12px 12px; font-size: .92rem; line-height: 1.55; white-space: pre-wrap; }
.po-tud-hitshead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Továbbítás (2026-08-06): címzett-chipek + jelölt-lista */
.po-fwd-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.po-fwd-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--hot); border-radius: 999px; font-size: .84rem; font-weight: 700; }
.po-fwd-chip button { border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink-2); padding: 0; }
.po-fwd-chip button:hover { color: var(--hot); }
.po-fwd-match { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
/* Átfutott-nyom (2026-08-06): a bot által kihagyott levelek halvány listája - struktúra
   szürkében, semmi piros (a lista informatív, nem teendő) */
.po-fold--skip .po-fold-h { color: var(--ink-2); }
.po-mini--skip { opacity: .72; }
.po-skipwhy { font-size: .76rem; color: var(--ink-2); flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* visszautaló sor + kérdés-sáv + lábléc */
/* köteg-sáv: gyűjtött jegyzetek + 'Fogalmazd meg mind' */
.po-batch { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--hot) 35%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--hot) 6%, var(--card)); }
.po-batch-c { font-size: .84rem; font-weight: 800; color: var(--hot); }
.po-batch .btn { padding: 8px 12px; font-size: .84rem; }
.po-batch-msg { font-size: .76rem; color: var(--ink-2); flex: 1 1 240px; min-width: 0; }
.po-wiz-recap { align-self: flex-start; border: 0; background: none; cursor: pointer; font: inherit; font-size: .84rem; color: var(--ink-2); padding: 0; text-align: left; }
.po-wiz-recap:hover { color: var(--ink); text-decoration: underline; }
.po-wiz-q { border: 1px solid color-mix(in srgb, var(--yellow-deep) 55%, var(--line)); border-left-width: 3px; border-radius: 10px; padding: 12px 12px; background: color-mix(in srgb, var(--yellow-deep) 8%, var(--card)); display: flex; flex-direction: column; gap: 8px; }
.po-wiz-q .q { font-weight: 700; font-size: .92rem; line-height: 1.45; }
.po-wiz-q input { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font: inherit; font-size: .92rem; background: var(--paper); color: inherit; }
.po-wiz-q input:focus { outline: none; border-color: var(--ink); }
.po-wiz-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; min-width: 0; max-width: 100%; }
.po-wiz-foot .sp { flex: 1; }
.po-wiz-foot .btn { padding: 8px 12px; font-size: .84rem; }
.po-wiz-next { font-weight: 800; }
.po-wiz-letter { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; background: var(--card); display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 100%; }
.po-wiz-from { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .92rem; }
.po-wiz-from .d { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.po-wiz-from .cc { font-size: .76rem; color: var(--ink-2); }
.po-wiz-subj { font-size: 1.02rem; font-weight: 700; line-height: 1.35; }
.po-wiz-gist { font-size: .92rem; line-height: 1.55; color: var(--ink); margin: 2px 0 0; }
.po-wiz-thread { margin-top: 2px; }
.po-wiz-toolrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; min-width: 0; max-width: 100%; }
/* a levél-panel FÜLEI: összefoglaló / szál / eredeti levél - egyszerre egy látszik, így a
   panel rövid marad és egy koppintás a váltás (2026-08-01) */
.po-wiz-tabs { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; max-width: 100%; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-top: 2px; }
.po-wiz-tabs button { flex: 0 1 auto; min-width: 0; font: inherit; font-size: .76rem; font-weight: 700; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.po-wiz-tabs button:hover { border-color: var(--line-2); }
.po-wiz-tabs button.is-on { border-color: var(--hot); color: var(--hot); background: color-mix(in srgb, var(--hot) 7%, var(--card)); }
/* a levél tetején ugyanaz a Tovább gomb, mint a lábon - hosszú levélnél ne kelljen végiggörgetni */
.po-wiz-topnext { display: flex; justify-content: flex-end; min-width: 0; max-width: 100%; }
@media (max-width: 720px) { .po-wiz-topnext .btn { width: 100%; justify-content: center; text-align: center; } }
/* a levágott fejléc/aláírás előhívója az Eredeti levél fülön */
.po-fullmore { align-self: flex-start; border: 0; background: none; padding: 4px 2px; font: inherit; font-size: .76rem; font-weight: 700; color: var(--ink-2); cursor: pointer; text-align: left; }
.po-fullmore:hover { color: var(--ink); }
.po-fullcut { font-size: .72rem; color: var(--muted); line-height: 1.5; }
/* HANGSÁV (titkárnő 1/3 + 2/3): rövid / eredeti levél / teljes szál + ismétlés. Saját
   kerete van, mert diktálás közben is azonnal megtalálhatónak kell lennie. */
.po-audiobar { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: none; }
.btn--rep { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
/* a kész levél HELYBEN szerkesztése a 3/3 lépésen */
.po-genedit { display: flex; flex-direction: column; gap: 8px; }
.po-genedit-s { width: 100%; border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 12px; font: inherit; font-size: .92rem; font-weight: 700; background: var(--paper); color: inherit; }
.po-genedit-s:focus { outline: none; border-color: var(--hot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hot) 14%, transparent); }
.po-wiz-letter .po-tocc { margin-top: 2px; }

.po-wiz-step { display: flex; flex-direction: column; gap: 8px; }
.po-wiz-steph { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); }
.po-wiz-steph .n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--hot); color: #fff; font-size: .84rem; font-weight: 800; flex: none; }
.po-wiz-hint { font-size: .76rem; color: var(--ink-2); line-height: 1.5; }
.po-dict { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 12px; font: inherit; font-size: .92rem; line-height: 1.55; background: var(--paper); color: inherit; resize: vertical; min-height: 92px; }
.po-dict:focus { outline: none; border-color: var(--hot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hot) 14%, transparent); }
.po-dictbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.po-wiz-tpl { border: 1px dashed var(--line); border-radius: 10px; padding: 4px 12px 12px; background: color-mix(in srgb, var(--brand) 3%, var(--card)); }
.po-wiz-tpl > summary { cursor: pointer; font-size: .76rem; color: var(--ink-2); padding: 8px 2px; user-select: none; }
.po-wiz-tpl .po-draft { margin-left: 0; margin-top: 8px; }
.po-wiz-decide { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.po-wiz-dbtns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.po-wiz-dbtns .sp { flex: 1; }
.po-wiz-dbtns .btn { padding: 8px 12px; font-size: .84rem; }
.po-wiz-decide .po-wiz-steph .n { background: var(--g0); }

/* keskeny kijelzo (telefon): kisebb margo, teljes szelessegu fo-gombok - mas
   kepernyoarany es felbontas mellett is minden latsszon es koppinthato legyen */
@media (max-width: 720px) {
  .po-draft, .po-draft--gen { margin-left: 8px; }
  .po-wiz-tpl .po-draft { margin-left: 0; }
  .po-dictbtns .btn { flex: 1 1 auto; min-height: 42px; }
  /* a hang-gombok telefonon is nagy célpontok legyenek (fél kézzel, menet közben nyomod) */
  .po-audiobar .btn { flex: 1 1 auto; min-height: 42px; }
  .po-modepick-row { grid-template-columns: 1fr; }
  /* a mód-gombokban a leíró mondat mobilon nem fér el szépen - az ikon + cím elég,
     a gombok laposak maradnak (regénymondat gombban: tilos) */
  .po-modebtn { min-height: 0; padding: 16px; flex-direction: row; justify-content: center; }
  .po-modebtn .d { display: none; }
  .po-wiz-foot .btn { min-height: 42px; }
  .po-wiz-next { flex: 1 1 100%; }
}
.po-draft-h { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.po-draft-h .l { font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-text); padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 10%, transparent); }
/* a három terv szándék szerint színkódolt címkét kap: igen / módosítás / kérdés */
.po-draft--0 .po-draft-h .l { color: var(--g0); background: color-mix(in srgb, var(--g0) 12%, transparent); }
.po-draft--1 .po-draft-h .l { color: color-mix(in srgb, var(--yellow-deep) 85%, var(--ink)); background: color-mix(in srgb, var(--yellow-deep) 14%, transparent); }
.po-draft--2 .po-draft-h .l { color: var(--g1); background: color-mix(in srgb, var(--g1) 12%, transparent); }
.po-draft-h .sp { flex: 1; }
.po-draft-h .btn { padding: 4px 12px; font-size: .76rem; }
.po-draft-b { padding: 8px 12px 12px; font-size: .84rem; line-height: 1.5; white-space: pre-wrap; }
.po-snlbl { font-size: .76rem; color: var(--muted); }
.po-foot { margin-top: 16px; font-size: .76rem; color: var(--muted); }
/* Posta-sávok: stabil szakaszok fix sorrendben - a sávcím szürke, nem piros.
   (2026-08-19: az itteni .po-lane / .po-lane + .po-lane duplikátum a fájl korábbi,
   ~2117. sori blokkjába olvadt, a számított állapot változatlan.) */
/* 2026-08-10 (user-kérés, 2. kör): a kategórianév MÉG nagyobb, hogy vezesse a szemet */
.po-lane-h { margin: 0; font-size: 1.02rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); display: flex; align-items: baseline; gap: 8px; }
.po-lane-h .c { font-weight: 700; color: var(--muted); }
.po-lane-h .hint { font-size: .72rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* JELVÉNY-ALAP (2026-08-19, designrendszer S5): EGY alak - 20px magas, 2px/8px belső
   térköz, .72rem/700, teljesen kerek, halvány brand-tónus. A 14-féle egyedi jelvény-alak
   helyett innentől mindegyik ennek a VÁLTOZATA (5 színcsalád, lentebb a fájl végén).
   A min-height + inline-flex azért kell, hogy az ikonos és az ikon nélküli jelvény
   PONTOSAN egyforma magas legyen egy sorban. */
.po-badge { flex: none; display: inline-flex; align-items: center; min-height: 20px; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--ink-2); white-space: nowrap; }
.po-badge.warn { background: var(--hot-100); color: var(--hot); }
.po-badge.ok { background: color-mix(in srgb, var(--g0) 14%, transparent); color: var(--g0); }
/* lenyitható szekciók: Halasztva / Lezárt */
.po-fold { margin-top: 16px; }
.po-fold-h { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 12px 2px; font: inherit; font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
/* a másolható blokk kiemelt (aktív teendő), nem szürke mint a lezártak */
.po-fold--draft .po-fold-h { color: var(--g0); border-top-color: color-mix(in srgb, var(--g0) 40%, var(--line)); }
/* megfogalmazásra váró jegyzetek - mindig látható, kiemelt (piros) blokk */
.po-fold--note { border-top: 1px solid color-mix(in srgb, var(--hot) 40%, var(--line)); padding-top: 12px; }
.po-notehead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.po-notehead .btn { padding: 8px 12px; font-size: .84rem; }
.po-mini--note { border-left: 3px solid var(--hot); }
.po-notesnip { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; color: var(--ink-2); font-style: italic; }
.po-brief .pill--note { background: color-mix(in srgb, var(--hot) 12%, transparent); color: var(--hot); }
.po-fold-hint { font-size: .76rem; color: var(--ink-2); line-height: 1.45; margin: 0 2px 8px; }
.po-draftpush { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 2px 12px; }
.po-pushmsg { font-size: .76rem; color: var(--ink-2); line-height: 1.4; flex: 1 1 300px; min-width: 0; }
/* MAI-beolvasás folyamatjelző: pörgő + eltelt idő futás közben, eredmény a végén */
/* „Beolvasva eddig" jelvény: a postafiók feldolgozottsága. Halvány, ha friss; piros
   keretes figyelmeztetés, ha kimaradt futás (13 óránál régebbi vízjel). */
/* a ket szinkron-sav nagy monitoron egymas mellett (2026-08-12) */
.po-wm-sor { display: contents; }
@media (min-width: 1100px) {
  .po-wm-sor { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; }
  .po-wm-sor > div { flex: 1 1 0; min-width: 0; }
  .po-wm-sor .po-wm { margin: 0; height: 100%; }
}
.po-wm { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper-2); font-size: .76rem; color: var(--ink-2); line-height: 1.4; }
.po-wm.is-stale { border: 2px solid var(--hot); color: var(--danger); background: color-mix(in srgb, var(--hot) 7%, var(--paper-2)); font-weight: 700; }
.po-wm-note { font-weight: 500; }
/* NYITHATÓ hiba-részletek (2026-07-28 user-kérés): a TELJES sor a koppintó-célpont
   (mobil-szabály: nagy célpont), a részlet-blokk a sor alá nyílik. Mobilon a po-wm-note
   rejtett, ott ez az egyetlen út a magyarázathoz és a teendőhöz. */
.po-wm.is-click { cursor: pointer; user-select: none; }
.po-wm-more { float: right; font-weight: 500; opacity: .8; font-size: .72rem; margin-left: 8px; white-space: nowrap; }
.po-wm-det { margin: -8px 0 12px; padding: 8px 12px 8px; border: 1px dashed var(--line); border-top: 0; border-radius: 0 0 10px 10px; background: var(--paper-2); font-size: .76rem; color: var(--ink-2); line-height: 1.5; font-weight: 400; }
.po-wm-det b { color: var(--ink); font-weight: 700; }
.po-wm-det-row { margin: 2px 0; }
.po-wm.is-stale + .po-wm-det { border-color: var(--hot); border-style: solid; border-width: 0 2px 2px; }
@media (max-width: 720px) { .po-wm { font-size: .76rem; padding: 8px 12px; } .po-wm-note { display: none; } .po-wm-det { font-size: .76rem; } }

.po-sync { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--brand) 6%, var(--paper-2)); font-size: .84rem; color: var(--ink-2); line-height: 1.4; }
.po-sync.is-running { border-color: color-mix(in srgb, var(--hot) 40%, var(--line)); background: color-mix(in srgb, var(--hot) 7%, var(--paper-2)); }
/* HIBA/kvóta: piros, VILLOGÓ keret + glow - hogy azonnal látszódjon, ha baj van (user-kérés) */
.po-sync.is-err { color: var(--ink); border-width: 2px; border-color: var(--hot); background: color-mix(in srgb, var(--hot) 10%, var(--paper-2)); animation: poErrFlash 1s ease-in-out infinite; }
.po-sync.is-err .po-sync-txt b, .po-sync.is-err .po-sync-txt { color: var(--hot); font-weight: 600; }
@keyframes poErrFlash {
  0%, 100% { border-color: var(--hot); box-shadow: 0 0 0 0 color-mix(in srgb, var(--hot) 50%, transparent); }
  50% { border-color: color-mix(in srgb, var(--hot) 40%, var(--paper-2)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--hot) 20%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .po-sync.is-err { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hot) 22%, transparent); } }
/* ELŐPOSTA: kártyáról előkészített, még át nem nézett levél jelvénye - VILLOG, mert
   addig a levél nem küldhető, és a felhasználónak észre kell vennie (user-kérés). */
.po-badge.po-review { background: var(--hot-100); color: var(--hot); border: 1px solid var(--hot); animation: poReviewFlash 1.1s ease-in-out infinite; }
@keyframes poReviewFlash {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hot) 45%, transparent); opacity: 1; }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hot) 18%, transparent); opacity: .72; }
}
@media (prefers-reduced-motion: reduce) { .po-badge.po-review { animation: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--hot) 22%, transparent); } }
.po-sync-txt { flex: 1 1 auto; min-width: 0; }
.po-sync-txt b { color: var(--ink); }
.po-sync-clock { font-family: var(--ff-mono); font-weight: 700; color: var(--hot); }
.po-sync-spin { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--hot) 22%, transparent); border-top-color: var(--hot); animation: poSpin .8s linear infinite; }
@keyframes poSpin { to { transform: rotate(360deg); } }
.po-sync-x { flex: none; background: none; border: none; cursor: pointer; color: var(--muted); font-size: .92rem; padding: 2px 4px; line-height: 1; }
.po-sync-x:hover { color: var(--ink); }

/* GYORS-BETEKINTŐ: a mai bejövők nyers listája (~3 mp, COM-olvasó) - csak megjelenítés.
   SZAGGATOTT keret + jelvény: ránézésre is más, mint az intézhető Posta-sorok. */
.po-peek { margin: 0 0 12px; border: 1.5px dashed color-mix(in srgb, var(--brand) 55%, var(--line)); border-radius: 10px; background: var(--card); overflow: hidden; }
.po-peek-h { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: .84rem; font-weight: 700; color: var(--ink); border-bottom: 1px dashed var(--line); background: color-mix(in srgb, var(--brand) 6%, var(--paper-2)); }
.po-peek-badge { flex: none; font-size: .68rem; font-weight: 800; letter-spacing: .07em; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 8px; background: var(--paper-2); }
.po-peek-h .sp { flex: 1; }
.po-peek-n { font-family: var(--ff-mono); font-size: .76rem; font-weight: 700; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.po-peek-t { font-size: .72rem; font-weight: 500; color: var(--muted); }
.po-peek-btn { flex: none; background: none; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--ink-2); font-size: .84rem; padding: 3px 8px; line-height: 1; }
.po-peek-btn:hover { color: var(--ink); border-color: var(--brand); }
.po-peek-note { margin: 0; padding: 12px 16px; font-size: .84rem; color: var(--ink-2); }
.po-peek-note.is-err { color: var(--hot); font-weight: 600; }
.po-peek-list { display: flex; flex-direction: column; }
.po-peek-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: .84rem; color: var(--ink-2); }
.po-peek-row:last-child { border-bottom: 0; }
.po-peek-row .t { flex: none; font-family: var(--ff-mono); font-size: .72rem; color: var(--muted); }
.po-peek-row .f { flex: none; font-weight: 700; color: var(--ink); }
.po-peek-row .s { flex: 1 1 40%; min-width: 0; font-weight: 600; color: var(--ink); }
.po-peek-row .p { flex: 1 1 100%; min-width: 0; font-size: .76rem; color: var(--muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.po-peek-row.is-unread { background: color-mix(in srgb, var(--brand) 4%, var(--card)); }
.po-peek-row.is-unread .s::after { content: ' •'; color: var(--hot); }
/* a levél SORSA: hova került a feldolgozás után (kártya-találatnál kattintható) */
.po-peek-w { flex: none; max-width: 100%; font-size: .72rem; font-weight: 700; line-height: 1.35; border-radius: 999px; padding: 2px 8px; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-2); text-align: left; }
button.po-peek-w { cursor: pointer; font-family: var(--ff); }
button.po-peek-w:hover { border-color: var(--brand); color: var(--brand-text); }
.po-peek-w.is-hot { color: var(--hot); border-color: color-mix(in srgb, var(--hot) 45%, var(--line)); background: color-mix(in srgb, var(--hot) 7%, var(--paper-2)); }
.po-peek-w.is-warn { color: color-mix(in srgb, var(--yellow-deep) 75%, var(--ink)); border-color: color-mix(in srgb, var(--yellow-deep) 50%, var(--line)); background: color-mix(in srgb, var(--yellow-deep) 9%, var(--paper-2)); }
.po-peek-w.is-done { color: var(--muted); }
.po-peek-w.is-muted { color: var(--muted); border-style: dashed; }
.po-peek-hint { margin: 0; padding: 8px 12px; font-size: .72rem; color: var(--muted); border-top: 1px dashed var(--line); }

/* + további változatok: a bot 1 terve mellé kérésre írt rövid/bővebb változat */
.po-morevar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 8px; }
.po-morevar-err { font-size: .76rem; color: var(--hot); font-weight: 600; }
@media (max-width: 720px) {
  .po-peek-row { padding: 12px 12px; }
  .po-peek-row .s { flex: 1 1 100%; }
  /* a sors-címke ujjbarát célpont legyen */
  .po-peek-w { padding: 8px 12px; font-size: .72rem; }
}
.po-mini { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); margin-bottom: 8px; font-size: .84rem; }
.po-mini--draft { border-left: 3px solid var(--g0); }
/* hajnali ÜTEMEZETT küldés: várakozó állapot (nem „aktív/piros"), visszafogott brand-szín + óra */
.po-brief .pill--sched { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand-text); }
.btn--sched { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); color: var(--brand-text); background: color-mix(in srgb, var(--brand) 8%, var(--card)); }
.btn--sched:hover { background: color-mix(in srgb, var(--brand) 16%, var(--card)); }
.po-fold--sched { border-top: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line)); padding-top: 8px; }
.po-sched-h { font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-text); padding: 4px 2px; }
.po-mini--sched { border-left: 3px solid var(--brand); }
.po-schedtime { flex: none; font-size: .76rem; font-weight: 700; color: var(--brand-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.po-schedtime.is-over { color: var(--hot); }
.po-mini .d { flex: none; font-size: .72rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.po-mini .n { flex: none; font-weight: 700; }
.po-mini .s { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.po-mini .btn { padding: 3px 8px; font-size: .76rem; }
/* kész válasz TELJES szövege kinyitva (mobil olvasás): a mini-sor alá simuló, olvasható panel */
.po-mini--draft.is-read { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.po-readbody { border: 1px solid var(--line); border-top: 0; border-left: 3px solid var(--g0); border-radius: 0 0 8px 8px; background: var(--card); margin: 0 0 8px; }
.po-readbody-h { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; padding: 8px 12px 0; }
.po-readbody-h .s2 { font-weight: 700; font-size: .84rem; }
.po-readbody-h .to { font-size: .76rem; color: var(--ink-2); }
.po-readbody-f { display: flex; gap: 8px; padding: 4px 12px 12px; flex-wrap: wrap; }
.po-readbody-f .btn { padding: 3px 12px; font-size: .76rem; }
/* kész válasz helyben szerkesztése (tárgy + törzs) */
.po-readedit { padding: 8px 12px 4px; display: flex; flex-direction: column; gap: 3px; }
.po-readedit-l { font-size: .68rem; font-weight: 800; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
.po-readedit-s { border: 1px solid var(--line); border-radius: 8px; padding: 8px 8px; font: inherit; font-size: .84rem; color: var(--ink); background: var(--bg); }
.po-readedit-b { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font: inherit; font-size: .84rem; line-height: 1.5; color: var(--ink); background: var(--bg); resize: vertical; }
.po-readedit-s:focus, .po-readedit-b:focus { outline: none; border-color: var(--g0); box-shadow: 0 0 0 2px color-mix(in srgb, var(--g0) 22%, transparent); }
/* JAVÍTÁS DIKTÁLÁSA a fold-szerkesztőben (2026-08-20): a mentés-gombok FÖLÖTT álló mező.
   Ugyanaz a mező-minta, mint a Titkárnő finomítás-során (.po-dict) - csak tömörebb. */
.po-readfix { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 0; }
.po-readfix .po-dict { min-height: 60px; font-size: .84rem; padding: 8px 12px; }
.po-date { border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; font: inherit; font-size: .76rem; color: var(--ink); background: var(--card); }
/* brífing-sáv: sávonkénti darabszámok + Döntés-sor / Sorban módváltók */
/* NEM ragadós: korábban sticky volt, és görgetéskor az alcím átütött rajta */
.po-brief { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 16px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--brand) 5%, var(--bg)); font-size: .84rem; color: var(--ink-2); }
.po-brief .sp { flex: 1; }
.po-brief .pill { font-size: .76rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--ink-2); white-space: nowrap; }
/* kattintható jelvény (pl. „halasztva"): gomb-alapok nullázva, hoverre jelez */
.po-brief .pill--btn { border: 1px solid transparent; font-family: var(--ff); cursor: pointer; }
.po-brief .pill--btn:hover { border-color: var(--brand); color: var(--brand-text); }
.po-brief .pill--hot { background: var(--hot-100); color: var(--hot); }
.po-brief .pill--draft { background: color-mix(in srgb, var(--g0) 16%, transparent); color: var(--g0); }
.po-brief .pill--fwd { background: var(--fwd); color: #fff; }
.po-brief .btn { padding: 4px 12px; font-size: .76rem; }
.po-decide-h { font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
/* címzett-sor a tervek felett: kinek megy a válasz - másolás előtt ellenőrizhető */
/* szerkesztheto cimzett-sor (2026-08-12) */
.po-cimzettek { display: flex; flex-direction: column; gap: 4px; }
.po-cimzettek .po-tocc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* a SZERKESZTHETŐ boríték (2026-09-04) a sor teljes szélességét kapja - a `.bor` maga nem flex-tétel */
.po-cimzettek .po-tocc > .bor { flex: 1 1 100%; }
/* 3/3: nyitott Szerkesztésnél a finomítás-mező a boríték ALÁ, a szerkesztő FÖLÉ kerül - csak
   vizuálisan (flex order), a DOM-hely marad, tehát a mező nem mountolódik újra */
.po-wiz-step--vegleges > .po-cimzettek { order: -2; }
.po-wiz-step--vegleges > .po-review-fix.is-elol { order: -1; margin: 0; }
.po-tocc-m { margin-left: 8px; }
.po-cc-to { color: var(--ink); }
.po-cc-ures { color: var(--muted); font-style: italic; }
.po-cc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; font-size: .76rem; font-weight: 600; color: var(--ink); }
.po-cc-chip.is-ki { opacity: .45; text-decoration: line-through; }
.po-cc-chip button { min-width: 22px; min-height: 22px; padding: 0; font: inherit; font-size: .72rem; color: var(--muted); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.po-cc-chip button:hover { color: var(--hot); }
.po-cc-add, .po-cc-scope { min-height: 26px; padding: 2px 12px; font: inherit; font-size: .72rem; font-weight: 700; color: var(--ink-2); background: var(--card); border: 1px dashed var(--line-2); border-radius: 999px; cursor: pointer; }
.po-cc-add:hover, .po-cc-scope:hover { color: var(--hot); border-color: var(--hot); }
.po-cc-scope.is-on { color: var(--hot); border-style: solid; border-color: var(--hot); background: var(--hot-100); }
.po-cc-kereso { display: flex; flex-direction: column; gap: 3px; padding: 8px; background: color-mix(in srgb, var(--ink) 8%, var(--card)); border: 0; border-radius: 8px; }
.po-cc-kereso input { padding: 8px 12px; font: inherit; font-size: .84rem; color: var(--ink); background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; }
.po-cc-talalat { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; min-height: 36px; font: inherit; font-size: .84rem; text-align: left; color: var(--ink); background: none; border: 0; border-radius: 8px; cursor: pointer; }
.po-cc-talalat:hover { background: var(--paper-2); }
.po-cc-talalat b { font-weight: 700; }
.po-cc-talalat span { color: var(--muted); font-size: .76rem; }
@media (max-width: 720px) { .po-cc-add, .po-cc-scope { min-height: 38px; padding: 8px 12px; } .po-cc-chip button { min-width: 30px; min-height: 30px; } }
.po-tocc { font-size: .76rem; color: var(--ink-2); padding: 4px 12px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--ink) 6%, var(--card)); }
/* melléklet-lista a lenyitott levélnél / a titkárnő levél-lépésén - megnyitható gombok */
.po-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .76rem; color: var(--ink-2); padding: 2px 2px; }
.po-attach-h { font-weight: 700; flex: none; }
.po-attach-i { font: inherit; font-size: .76rem; font-weight: 600; color: var(--g1); background: color-mix(in srgb, var(--g1) 9%, transparent); border: 1px solid color-mix(in srgb, var(--g1) 28%, var(--line)); border-radius: 8px; padding: 2px 8px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-attach-i:hover { background: color-mix(in srgb, var(--g1) 16%, transparent); text-decoration: underline; }
.po-attach-i.is-off { color: var(--muted); background: none; cursor: default; border-style: dashed; }
.po-attach-i.is-off:hover { text-decoration: none; }
/* KIMENŐ LEVÉL FÁJL-MELLÉKLETEI (2026-09-05): a csip `név · méret` (koppintásra letöltés),
   mellette a × ugyanabban a csip-kinézetben (levétel). A lista TÖRDELŐDIK - görgető nincs
   (dupla görgetés tilos). A szekció-cím a .po-readedit-l közös stílusa. */
.po-melleklet { padding: 4px 12px 4px; }
.po-melleklet .po-readedit-l { display: block; margin-bottom: 4px; }
.po-attach-w { display: inline-flex; align-items: stretch; max-width: 100%; min-width: 0; }
.po-attach-w .po-attach-i { border-radius: 8px 0 0 8px; min-width: 0; }
.po-attach-x { font: inherit; font-size: .84rem; font-weight: 700; line-height: 1; color: var(--ink-2); background: color-mix(in srgb, var(--g1) 9%, transparent); border: 1px solid color-mix(in srgb, var(--g1) 28%, var(--line)); border-left: 0; border-radius: 0 8px 8px 0; padding: 2px 9px; cursor: pointer; flex: none; }
.po-attach-x:hover { color: var(--hot); background: var(--hot-100); }
.po-attach-x:disabled { opacity: .5; cursor: default; }
.po-attach-ures { color: var(--muted); font-size: .76rem; }
/* feladó-szabály sor (Screener): egy feladóról egyszer döntünk */
/* szál-idővonal a lenyitott sorban és a részletezőben */
.po-thread { border: 0; border-radius: 8px; background: color-mix(in srgb, var(--ink) 6%, var(--card)); padding: 4px 8px; }
/* 2026-08-10 (user-kérés: "legyen nagyobb a Szál felirat"): teljes szélességű, chip-szerű
   gomb, mobil-méretű célfelülettel (min. 44px magas) */
/* A Szál-gomb belseje tördelhető: mobilon a meta a második sorba csúszik, a nyíl a jobb
   szélen marad. A záró mondat (ki írt a válaszod óta) a 2026-08-10-én megszüntetett külön
   figyelmeztető blokk helyére lépett - user-döntés: "nem kell, hiszen ott a szál". */
/* "utoljára: X" - a szál legutolsó levelének feladója, ha nem a kártya névadója (Szacsvai-eset).
   Piros, mert ez AKTÍV jelzés: más írt, mint akit a soron látsz. */
.po-badge--utolso { color: var(--hot); background: var(--hot-100); font-weight: 800; white-space: normal; }
.po-badge--utolso svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.po-badge--var { color: var(--hot); background: var(--hot-100); border-color: color-mix(in srgb, var(--hot) 35%, transparent); }
/* a regi tablazatos szal-sorok (.po-tmsg/.dr-tmsg) 2026-08-08-an kivezetve -
   minden szal-nezet a SzalIdovonal fuggoleges idovonalat hasznalja (.szt-lista/.szt-sor) */
.po-tmsg .g { flex: 1; min-width: 0; }
.dr-thread { margin-top: 8px; border-left: 2px solid var(--line); padding-left: 10px; }
/* visszavonási sáv a lap alján - a verdikt 6 mp-ig visszavonható */
.po-undotoast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: .84rem; box-shadow: 0 8px 24px rgba(16, 17, 20, .25); z-index: 60; max-width: min(92vw, 480px); }
.po-undotoast span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-undotoast .btn { padding: 3px 12px; font-size: .76rem; background: var(--bg); color: var(--ink); border-color: transparent; flex: none; white-space: nowrap; }
/* a verdikt-sor vizuálisan elkülönül a tervektől - ez a döntés helye */
@media (max-width: 720px) {
  /* a lebego fejlec-gombok (tema/csengo/fullscreen) ne ussznak ra semmilyen szovegre:
     kisebb gombok + a fejlec-cim helyet hagy nekik es ellipszissel rovidul */
  .themebtn--head { width: 32px; height: 32px; top: 8px; right: 10px; font-size: .9rem; }
  .fsbtn--head, .notifbtn--head { right: 48px; }
  .notifbtn--head.notifbtn--shift { right: 86px; }
  /* a cím helyigénye a gombok TÉNYLEGES számából (--fejgomb-db, a CurriculumApp adja):
     10px jobb margó + N × 32px gomb + (N-1) × 6px köz. Fix értékkel vagy a cím csúszott
     a gombsor alá (5 gombnál), vagy fölöslegesen veszett el a helye (4 gombnál). */
  .masthead .wrap { padding-right: calc(12px + var(--fejgomb-db, 5) * 38px); }
  .masthead .brandmark, .masthead .brandmark > div { min-width: 0; }
  /* Posta brief-sor: a pillek egy sorban, a ket mod-gomb kulon, teljes szeles sorban */
  .po-brief .sp { display: none; }
  .po-brief { row-gap: 8px; }
  .po-brief .btn { flex: 1 1 45%; min-height: 38px; }
  .po-lane-h .hint { display: none; }
  .po-mini { flex-wrap: wrap; }
  .po-brief { position: static; box-shadow: none; }
  /* 2026-08-10: 34 -> 42px. Ez a sor a fájlban KÉSŐBB áll, mint a döntés-gombok másik
     mobil-szabálya, tehát ez nyer - a kettőnek együtt kell mozognia. */
  .po-main { flex-wrap: wrap; row-gap: 4px; }
  .po-main .s { flex-basis: 100%; order: 5; white-space: normal; overflow: visible; font-size: .84rem; }
  .po-gist { flex-wrap: wrap; }
  .po-card { max-width: 100%; margin-left: 0; flex-basis: 100%; text-align: left; }
}
@media (max-width: 720px) {
  .po-main { flex-wrap: wrap; }
  .po-main .s { flex-basis: 100%; order: 5; white-space: normal; }
  .po-gist { flex-direction: column; gap: 4px; }
  .po-card { margin-left: 0; max-width: 100%; }
  .po-draft-h { flex-wrap: wrap; }
}

/* MENTES-DOKK: jobb also sarok - desktopon a harom gomb mindig latszik,
   mobilon hamburger-FAB, amibol felfele nyilnak a gombok */
.savedock { position: fixed; right: 14px; bottom: 14px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* ŐRSÉG-TOASTOK: hangos, piros hibajelzés a jobb alsó sarokban, MINDEN nézetben
   (2026-07-27 user-kérés: a hiba ELŐRE és láthatóan szóljon, ne halvány szürke sorban) */
.toaststack { position: fixed; right: 14px; bottom: 74px; z-index: 95; display: flex; flex-direction: column; gap: 10px; max-width: min(430px, calc(100vw - 28px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; border: 2px solid var(--hot); border-radius: 12px; background: var(--card); box-shadow: 0 10px 34px rgba(16, 17, 20, .3), 0 0 0 4px color-mix(in srgb, var(--hot) 14%, transparent); animation: toastIn .3s cubic-bezier(.2, .8, .25, 1) both; }
.toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.toast-t { font-size: .92rem; font-weight: 800; color: var(--hot); line-height: 1.3; }
.toast-m { font-size: .8rem; color: var(--ink); line-height: 1.45; overflow-wrap: break-word; }
.toast-x { flex: none; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); color: var(--ink-2); font-size: .85rem; line-height: 1; padding: 6px 9px; cursor: pointer; }
.toast-x:hover { border-color: var(--hot); color: var(--hot); }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
@media (max-width: 720px) {
  /* mobilon alul, teljes szélességben, a FAB és a savedock fölött */
  .toaststack { left: 10px; right: 10px; bottom: calc(80px + env(safe-area-inset-bottom)); max-width: none; }
  .toast-x { padding: 10px 13px; }
}
.savedock-btns { display: flex; gap: 8px; }
.savedock-btns .btn { background: var(--card); box-shadow: 0 4px 16px rgba(16, 17, 20, .16); }
.savedock-msg { max-width: min(420px, 80vw); font-size: .74rem; font-weight: 700; color: var(--danger); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; box-shadow: 0 6px 20px rgba(16, 17, 20, .18); }
.savedock-msg.ok { color: var(--g0); }
/* mentés-hiba: nem eltűnő, villogó keretű figyelmeztetés - ezt észre KELL venni, mert
   azt jelenti, hogy a képernyőn látható állapot nincs kiírva a fájlba */
.savedock-msg.is-err { border: 2px solid var(--hot); animation: saveErrFlash 1.1s ease-in-out infinite; }
@keyframes saveErrFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); } 50% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); } }
@media (prefers-reduced-motion: reduce) { .savedock-msg.is-err { animation: none; } }
.savedock-fab { display: none; }
@media (max-width: 720px) {
  .savedock { bottom: calc(14px + env(safe-area-inset-bottom)); }
  .savedock-btns { display: none; }
  .savedock.is-open .savedock-btns { display: flex; flex-direction: column; align-items: stretch; }
  .savedock-btns .btn { justify-content: center; text-align: center; padding: 10px 16px; }
  .savedock-fab { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 1.15rem; box-shadow: 0 6px 20px rgba(16, 17, 20, .24); cursor: pointer; }
}

/* betoltes-allapot: teljes panel a viewportban (a DEFAULT terkep SOSEM renderelodik) */
.load-pane { min-height: calc(100dvh - 220px); display: grid; place-items: center; color: var(--muted); font-weight: 700; text-align: center; padding: 24px; }
.load-pane--err { align-content: center; justify-items: center; gap: 14px; color: var(--ink); }
.load-pane--err p { max-width: 560px; font-weight: 600; line-height: 1.5; margin: 0; }
.load-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px var(--pad) 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--danger) 8%, var(--card)); font-size: .82rem; font-weight: 700; }

/* ============ AGENDA-LISTA (Feladatok + Esemenyek) ============
   LISTA, nem racs: desktopon minden feladat EGYETLEN sor (pipa + cim + meta
   jobbra), mint egy levelezoklien listaja - igy fentrol le olvashato.
   Mobilon 2 sor (cim-sor + meta-sor). Minden reszlet a reszletezoben. */
.agenda .cc-grid { display: flex; flex-direction: column; gap: 6px; }
.agc { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; }
.agc .agc-top { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.agc .agc-title { flex: 1; min-width: 0; font-weight: 700; color: var(--ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc .ag-prio { flex: none; }
.agc .ag-check { flex: none; }
.agc-meta { flex: none; display: flex; flex-wrap: nowrap; gap: 12px; font-size: .74rem; font-weight: 600; color: var(--ink-2); }
/* egyetlen chip se lehessen szélesebb a soránál (hosszú régi szöveges határidők!) */
.agc-meta .m { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.agc-meta .m.ok { color: var(--g0); }
.agc-meta .m.warn { color: color-mix(in srgb, var(--yellow-deep) 75%, var(--ink)); }
.agc-meta .m.doing { color: var(--g1); }
.agc-meta .m.hot { color: var(--hot); }
.agc-meta .m.ev { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
/* a levél-jelvény kattintható a kártyán (ugrás a Postába) - a span-stílust örökli */
.agc-meta .mbtn { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 600; line-height: inherit; white-space: nowrap; cursor: pointer; }
.agc-meta .mbtn:hover { text-decoration: underline; }
/* Legfontosabbak: tömör, kiemelt sáv a Feladatok tetején (levél-ügyek + közeli határidő + magas) */
.ag-top { margin-top: 4px; }
.ag-top-h { color: var(--hot); }
.ag-top-h::before { background: var(--hot); }
/* összecsukható fejléc-gomb: a szekció-cím kinézetét tartja, csak a gomb-alapokat nulláztuk */
.ag-top-toggle { background: none; border: 0; padding: 4px 0; font-family: var(--ff); width: 100%; text-align: left; cursor: pointer; }
.ag-top-toggle:hover { opacity: .82; }
.ag-top-chev { margin-left: auto; font-size: .78rem; }
/* állapot-szűrő: ugyanaz a chipsor, mint a kategória-szűrő, csak közvetlenül alatta */
.ag-statusfilter { margin-top: -8px; }
.ag-toplist { display: flex; flex-direction: column; gap: 6px; }
/* „+N további": csak az AUTOMATIKUSAN kiemeltek vannak korlátozva - a kézi ⭐ korlátlan */
.ag-topmore { align-self: flex-start; border: 1px dashed var(--line-2); border-radius: 9px; background: none; padding: 7px 12px; font: inherit; font-size: .78rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.ag-topmore:hover { border-color: var(--brand); color: var(--brand-text); background: color-mix(in srgb, var(--brand) 6%, transparent); }
@media (max-width: 720px) { .ag-topmore { align-self: stretch; text-align: center; padding: 10px 12px; } }
.ag-toprow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: 100%; text-align: left; padding: 8px 12px; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 9px; background: var(--card); font: inherit; font-size: .85rem; color: var(--ink); cursor: pointer; }
.ag-toprow:hover { border-color: color-mix(in srgb, var(--hot) 40%, var(--line)); background: color-mix(in srgb, var(--hot) 5%, var(--card)); }
.ag-toprow.prio-high { border-left-color: var(--hot); }
/* a sor belseje: pipa + megnyitó gomb (gomb-a-gombban érvénytelen lenne) */
.ag-toprow-open { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.ag-toprow .ag-check { width: 19px; height: 19px; margin: 0; }
.ag-toprow .tt, .ag-toprow-open .tt { flex: 1; min-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ag-toprow .b { flex: none; font-size: .72rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.ag-toprow .b.hot, .ag-toprow .b.prio { color: var(--hot); }
.ag-toprow .b.warn { color: color-mix(in srgb, var(--yellow-deep) 75%, var(--ink)); }
/* MOBIL: a CÍM a legfontosabb - kapja meg a teljes sort és tördeljön; a dátum/jelzés-badge-ek
   alá csúsznak. Korábban a fix szélességű badge-ek szorították ki a nevet („Vienna …"). */
@media (max-width: 720px) {
  .ag-toprow { align-items: flex-start; }
  /* legfeljebb 2 sor: a név lényege látszik, de egy tétel nem visz el fél képernyőt */
  .ag-toprow .tt, .ag-toprow-open .tt { flex: 1 1 100%; min-width: 0; white-space: normal; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ag-toprow-open { row-gap: 4px; }
  .agc .agc-title { white-space: normal; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* prioritas: bal szinsav - piros CSAK a magas; a tobbi visszafogott */
.agc.prio-high { border-left: 3px solid var(--hot); }
.agc.prio-normal { border-left: 3px solid var(--line-2); }
.agc.prio-low { border-left: 3px solid transparent; }
.agc.is-doing { background: color-mix(in srgb, var(--g1) 5%, var(--card)); }
.agc.is-featured { border-left: 3px solid var(--yellow-deep); }
@media (max-width: 720px) {
  .agc { flex-direction: column; align-items: stretch; gap: 5px; padding: 9px 12px 10px; }
  .agc .agc-top { align-items: flex-start; }
  .agc .agc-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .agc-meta { flex-wrap: wrap; gap: 3px 12px; padding-left: 26px; }
  .agc-meta.noindent { padding-left: 0; }
  /* a fejlec-vezerlok EGY-EGY vizszintesen gorgetheto sorban (ne toljak le a listat) */
  .ag-catfilter { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ag-catfilter::-webkit-scrollbar { display: none; }
  .ag-catfilter .ag-cat { flex: none; white-space: nowrap; }
  .cat-block-head .ag-mode { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .cat-block-head .ag-mode::-webkit-scrollbar { display: none; }
  .cat-block-head .ag-mode button { flex: none; white-space: nowrap; }
}

/* ============ AGENDA-RESZLETEZO (drawer) ============
   szakaszfejek a szerkeszto-fulek szinvilagaval: sarga=alfeladatok,
   kek=emberek, zold=levelezes */
.dr-sec { margin: 18px 0 8px; padding: 5px 10px; border-left: 4px solid var(--g1); background: color-mix(in srgb, var(--g1) 8%, transparent); border-radius: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
/* a részletező szekciófejei is EGY nyelvet beszélnek: semleges szürke csík (a kék/sárga/zöld
   variánsok maradnak az osztálylistában, de nem festenek külön színt) */
.dr-sec { border-left-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, transparent); }
.dr-sec.c-yellow, .dr-sec.c-green { border-left-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, transparent); }
.dr-empty { font-size: .8rem; color: var(--muted); font-style: italic; margin: 4px 0 10px; }
/* a beérkezett levél válasz-állapota a részletezőben */
.dr-repl { display: inline-block; margin-left: 8px; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--hot-100); color: var(--hot); white-space: nowrap; }
.dr-repl.ok { background: color-mix(in srgb, var(--g0) 14%, transparent); color: var(--g0); }
/* tengely-szinkron figyelmeztetés a részletezőben (határidő vs. esemény napja) */
.dr-warn { margin: 6px 0 0; font-size: .78rem; color: color-mix(in srgb, var(--yellow-deep) 80%, var(--ink)); background: color-mix(in srgb, var(--yellow-deep) 10%, transparent); border-radius: 8px; padding: 6px 10px; }
.dr-warn .dr-link { color: inherit; font-weight: 700; }
.dr-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.dr-link:hover { color: var(--g1); }
.dr-steps { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dr-steps li { display: flex; align-items: flex-start; gap: 8px; font-size: .88rem; line-height: 1.35; }
.dr-steps li.is-done .tx { text-decoration: line-through; color: var(--muted); }
.dr-steps .tx { flex: 1; min-width: 0; }
.dr-steps .ag-smeta { flex: none; }
.dr-task, .dr-letter { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 9px; padding: 7px 10px; margin-bottom: 6px; cursor: pointer; font-size: .85rem; color: var(--ink); }
.dr-task:hover { border-color: var(--g1); }
/* a sor belseje: pipa + megnyitó gomb (a sor maga már nem gomb) */
.dr-task-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.dr-task .ag-check { width: 18px; height: 18px; margin: 0; flex: none; }
.dr-task-open .t { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-task-open .m { flex: none; font-size: .72rem; color: var(--ink-2); white-space: nowrap; }
.dr-letter:hover { border-color: var(--g0); }
.dr-task .dot { width: 9px; height: 9px; border-radius: 999px; background: var(--muted); flex: none; }
.dr-task.st-done .dot { background: var(--g0); }
.dr-task.st-doing .dot { background: var(--g1); }
.dr-task .t, .dr-letter .t { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-task .m, .dr-letter .m { flex: none; font-size: .72rem; color: var(--ink-2); white-space: nowrap; }
.dr-addtask { margin: 2px 0 12px; }
/* KI MIT CSINÁL - személyenként elkülönülő kártya: név + szerep + saját teendők, itt pipálhatók.
   A felelős kártyája piros csíkot kap (kiemelt), a kiosztatlan lépéseké sárgát (figyelmeztet). */
.dr-person { margin: 0 0 10px; padding: 10px 12px 11px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 10px; background: color-mix(in srgb, var(--brand) 4%, var(--card)); }
.dr-person--owner { border-left-color: var(--hot); background: color-mix(in srgb, var(--hot) 3%, var(--card)); }
.dr-person--free { border-left-color: var(--yellow-deep); background: color-mix(in srgb, var(--yellow-deep) 5%, var(--card)); }
.dr-person-h { display: flex; align-items: center; gap: 8px; }
.dr-person-role { font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--hot); background: var(--hot-100); padding: 2px 8px; border-radius: 999px; }
.dr-person-count { margin-left: auto; flex: none; font-size: .74rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dr-person-count.ok { color: var(--g0); }
.dr-person-free-t { font-size: .8rem; font-weight: 800; color: color-mix(in srgb, var(--yellow-deep) 75%, var(--ink)); }
.dr-person-steps { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.dr-person-steps li { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; line-height: 1.4; }
.dr-person-steps li.is-done .tx { text-decoration: line-through; color: var(--muted); }
.dr-person-steps .tx { flex: 1; min-width: 0; }
.dr-person-steps .tx .tt { font-style: normal; font-weight: 700; color: var(--ink-2); }
.dr-person-steps .du { flex: none; font-size: .72rem; color: var(--ink-2); white-space: nowrap; }
.dr-person-steps .ag-scheck { width: 18px; height: 18px; margin-top: 1px; }
.dr-person-none { font-size: .74rem; color: var(--muted); font-style: italic; margin: 5px 0 0; }
/* (a részletező esemény-hozzákapcsoló .dr-evpick blokkja 2026-08-09-én kivezetve -
   kapcsolni a Szerkesztő-modálban lehet; a .due-sugg chip maradt: a határidő-átvevő használja) */
.due-sugg { border-color: color-mix(in srgb, var(--hot) 40%, var(--line)) !important; color: var(--hot) !important; background: var(--hot-100) !important; font-weight: 700; }
/* strukturált határidő-választó (DueInput) és az esemény-időpont sor */
.due-in { display: flex; flex-direction: column; gap: 8px; }
.due-row { display: flex; gap: 8px; flex-wrap: wrap; }
.due-row input { flex: none; }
.due-preview { font-size: .8rem; color: var(--ink-2); background: color-mix(in srgb, var(--brand) 7%, transparent); border-radius: 8px; padding: 6px 10px; align-self: flex-start; }
.due-legacy { margin-top: 6px; font-size: .76rem; color: color-mix(in srgb, var(--yellow-deep) 75%, var(--ink)); background: color-mix(in srgb, var(--yellow-deep) 9%, transparent); border-radius: 8px; padding: 6px 10px; }
.dr-lst { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.dr-lst.draft { background: color-mix(in srgb, var(--yellow-deep) 20%, transparent); color: color-mix(in srgb, var(--yellow-deep) 80%, var(--ink)); }
.dr-lst.sent { background: color-mix(in srgb, var(--g0) 18%, transparent); color: var(--g0); }

/* Katalogus mobilon: kompakt felev-fejlecek - a program-fej (BA/MA) kicsi,
   a felev + az osszesito (targy/kredit/ora) EGY karcsu sorban, kis paddingokkal */
@media (max-width: 720px) {
  .catalog > div > .cat-block-head { margin-top: 12px; margin-bottom: 4px; }
  .catalog > div > .cat-block-head .pl { font-size: 1.1rem; }
  .cc-section { margin-bottom: 14px; }
  .cc-head { padding-bottom: 5px; margin-bottom: 8px; row-gap: 2px; }
  .cc-sem { font-size: .95rem; }
  .cc-totals { width: auto; margin-left: auto; gap: 10px; }
  .cc-totals div { display: flex; align-items: baseline; gap: 3px; text-align: left; }
  .cc-totals b { display: inline; font-size: .92rem; }
  .cc-totals span { font-size: .64rem; }
}

/* 🖨 havi riport gomb a naptári hónap fejlécében - jobbra, diszkréten */
.cal-mh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal-print { border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; font: inherit; font-size: .72rem; font-weight: 700; padding: 2px 10px; flex: none; }
.cal-print:hover { border-color: var(--brand); color: var(--brand-text); }
.viewer .cal-print { display: none !important; }

/* ---- Névjegyzék mentés-sor: a globális .mfoot UTÁN kell állnia, hogy felülírja ----
   nincs szürke sáv és óriás alsó margó; desktopon a Mentés gomb a jobb alsó
   mentés-dokk MELLÉ kerül, mobilon a lista alján marad, kis térközzel */
.pmv .mfoot { position: static; background: transparent; border-top: 0; box-shadow: none; margin: 0; padding: 4px 0 10px; }
.pmv .pmv-scroll { padding-bottom: 24px; }
@media (min-width: 721px) {
  .pmv .mfoot { position: fixed; right: 344px; bottom: 14px; z-index: 61; padding: 0; }
  .pmv .mfoot .btn { box-shadow: 0 6px 20px rgba(16, 17, 20, .24); }
}

/* ---- 🖨 havi riport: tétel-lista - a globális form-label (NAGYBETŰS) és a
   teljes szélességű input-stílus itt SEMLEGESÍTVE, normál olvasható sorok ---- */
.mr-list { display: grid; gap: 6px; }
.mr-list .mr-item { display: flex; gap: 9px; align-items: flex-start; text-align: left; cursor: pointer; font-size: .89rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); line-height: 1.45; margin: 0; }
.mr-list .mr-item input[type="checkbox"] { width: auto; flex: none; margin: 3px 0 0; padding: 0; border: 0; box-shadow: none; accent-color: var(--hot); }
.mr-list .mr-item.is-off { opacity: .55; }
.mr-list .mr-item .adm { font-style: normal; color: var(--muted); font-size: .78rem; }
/* HAVI RIPORT - két levél (2026-09-03): kategória-csip, ★ kiemelés, állapot, levél-blokkok */
.mr-list .mr-item { flex-wrap: wrap; align-items: center; }
.mr-list .mr-item .mr-star { flex: none; min-height: 32px; min-width: 32px; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--muted); font-size: 1rem; cursor: pointer; }
.mr-list .mr-item .mr-star.is-on { color: #fff; background: var(--hot); border-color: var(--hot); }
.mr-list .mr-item .mr-lab { flex: 1 1 240px; min-width: 0; }
.mr-list .mr-item .mr-kat { flex: none; max-width: 100%; font-size: .78rem; padding: 4px 6px; min-height: 32px; }
.mr-list .mr-item .mr-all { flex: none; font-style: normal; font-size: .74rem; padding: 2px 8px; border-radius: 999px; background: var(--line); color: var(--ink-2); }
.mr-list .mr-item .mr-all--megvalosult { background: var(--hot-100); color: var(--hot); }
.mr-figy { margin: 6px 0 0; font-size: .82rem; color: var(--hot); }
.mr-lev { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
/* a modál .f rácsában a levél-blokkok és a gombsor teljes szélességűek (két oszlopba estek) */
.mr-lev, .mr-lev-btns, .mr-figy { grid-column: 1 / -1; }
.mr-lev-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .86rem; }
.mr-lev-to { color: var(--muted); }
.mr-lev-tart { font-style: normal; font-size: .74rem; padding: 2px 8px; border-radius: 999px; background: var(--line); color: var(--ink-2); }
.mr-lev .mr-subj { width: 100%; }
.mr-lev-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mr-ok { color: var(--muted); font-size: .82rem; }
.mr-kihagy { font-size: .82rem; color: var(--muted); }
.mr-kihagy ul { margin: 6px 0 0; padding-left: 18px; }

/* Segédletek: dokumentum-kivonat gazdagabb szekciói (Etikai Kódex) */
.it-doc-sum .doc-sec { margin: 12px 0 4px; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-text); border-left: 3px solid var(--brand); padding-left: 8px; }
.it-doc-sum .doc-note { margin: 6px 0; font-size: .82rem; line-height: 1.5; color: var(--ink-2); background: color-mix(in srgb, var(--brand) 5%, transparent); border-radius: 8px; padding: 8px 10px; }
.it-doc-sum .doc-situ { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 8px; }
.it-doc-sum .doc-situ > li { font-size: .85rem; line-height: 1.5; border-left: 2px solid var(--line); padding-left: 10px; }
.it-doc-sum .doc-situ > li strong { color: var(--ink); }

/* gyors "nem kell valasz" gomb a Posta listasoraban - lenyitas nelkul lezar (2026-07-22) */
.po-gist .po-nvx { margin-left: 8px; font-size: .76rem; padding: 2px 8px; vertical-align: middle; white-space: nowrap; }

/* POSTAZO HUB (2026-07-22): fulek (lista / uj level) + balrol beuszo fly-in panel mas nezetek felett */
.posta-tabs { display: flex; gap: 10px; align-items: center; padding-top: 12px; flex-wrap: wrap; }
.posta-tabs .posta-fly-close { margin-left: auto; }
.posta-scrim { z-index: 76; }
.posta-hub--fly { position: fixed; top: 0; left: 0; bottom: 0; right: auto; width: min(1080px, 100vw); z-index: 77; overflow-y: auto; background: var(--paper, #fff); border-right: 1px solid var(--line); box-shadow: 16px 0 50px rgba(16, 17, 20, .22); animation: postaFlyIn .24s cubic-bezier(.2, .8, .25, 1) both; padding-bottom: 48px; }
@keyframes postaFlyIn { from { transform: translateX(-70px); opacity: 0; } to { transform: none; opacity: 1; } }
.posta-hub--fly .posta-tabs { position: sticky; top: 0; z-index: 5; background: var(--paper, #fff); padding-bottom: 8px; border-bottom: 1px solid var(--line); }

/* a hub-fulek a PageHead ala csusznak vizualisan - a kattintast CSAK a fulek kapjak.
   2026-08-12 (user: "a sor nem nyilik le a fulek mellett"): a teljes szelessegu, atlatszo
   sav z-index 6-tal ELFOGTA a kattintast az alatta levo Posta-sor folott - a pointer-events
   none/auto paros atengedi az ures reszen, a gombokon viszont el. */
.posta-tabs { position: relative; z-index: 6; justify-content: flex-end; pointer-events: none; }
.posta-tabs .viewtoggle, .posta-tabs .posta-fly-close { pointer-events: auto; }

/* 2026-08-13 (user: "a Sablontar (201) / Mentett levelek (188) a Posta felirat es a + Uj level
   gomb ala csuszik"): a hub abszolut poziciojú gyerekei (.postav, .tpv) inset:0-val a TELJES
   hubot fedtek, tehat a 47px-es fulsav ALATT indultak - a ket fulsor 20 pixelen atfedte egymast
   (merve 1444px-en: hub-sav 161..195, tpv-fulsor 175..207, 3 utkozo gombpar). A hub mostantol
   oszlop-flex: a fulsav fix, a torzs kapja a maradekot, ES a torzs a pozicionalasi keret -
   magic number nelkul, tehat a fulsav tordeleset (keskeny ablak) is koveti.
   MOBILON (<=720px) a gyerekek statikusak es a fulsav tapado sav, ott nem nyulunk hozza.
   FIGYELEM: a hub display-e INLINE stilusbol jon (CurriculumApp), mert az inline mindig veri a
   stiluslapot - ezert all ott 'flex' es nem 'block'. Az irany viszont MINDEN meretnel column
   kell: mobilon az inline flex kulonben sorba rendezne a fulsavot es a torzset. */
.posta-hub { flex-direction: column; }
@media (min-width: 721px) {
  .posta-hub > .posta-tabs { flex: none; }
  .posta-hub > .posta-hub-body { position: relative; flex: 1 1 auto; min-height: 0; }
}

/* MOBIL, Postazo hub "Uj level" ful (2026-07-23): a .tpv asztali, abszolut-pozicios
   fix-magassagu modellje a hubon belul 0 magassagot orokolt, es osszenyomta az of also
   Titkarno-savot (egymasra csuszo textarea/gombok). Mobilon sima, termeszetes folyam:
   az oldal gorget, semmi nem nyomodik ossze. */
@media (max-width: 720px) {
  .posta-hub .tp3 { min-height: 0; }
  .posta-hub .nm-titkar textarea { min-height: 84px; }
}

/* ═══ AZ ÚJ LEVÉL FÜL: EGYETLEN GÖRGETŐ, MINDEN MÉRETBEN (2026-08-26) ═══
   USER-TÖRVÉNY: dupla görgetés TILOS, a lap görgessen. Asztalon eddig KÉT külön belső
   görgető volt egymás mellett (mérve: `.tp-scroll` 583/394 a sablontár-oszlopban és
   `.pm-body.nm-body` 657/268 a szerkesztőben), tehát a fül két, egymástól függetlenül
   görgethető hasábra esett szét - ezt senki nem kérte. Mostantól a fül tartalma EGYBEN
   folyik, és a görgetést a hub viszi (mobilon ez már így volt). A lista-fül érintetlen:
   ott a `.postav` abszolút, ezért a törzse fix magasságú marad, és a hub nem görget. */
.posta-hub { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.posta-hub > .posta-hub-body--ir { flex: 0 0 auto; min-height: 0; }
.posta-hub .tpv { position: static; overflow: visible; height: auto; }
.posta-hub .tp3 { align-items: start; }
.posta-hub .tp-scroll { overflow-y: visible; overflow-x: visible; }
.posta-hub .nm-inline { flex: 0 0 auto; overflow: visible; height: auto; }
.posta-hub .nm-inline .pm-body.nm-body { overflow-y: visible; overscroll-behavior: auto; min-height: 0; }
/* A KÜLDÉS-GOMBSOR MINDIG KÉZNÉL (2026-08-26, user: „sosem jutok le a Postázóba gombig"):
   az egyetlen görgető alsó éléhez ragad, tehát hosszú levélnél sem kell érte vadászni.
   Ez NEM második görgető - a sticky csak a saját görgetőjén belül tapad. */
.posta-hub .mfoot { position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -6px 14px -8px rgb(0 0 0 / .28); }

/* ================= IDŐVONAL (TimelineView, ÚJRATERVEZVE 2026-08-10) =================
   Az onboarding-oldalak hónap-csipes, függőleges idővonal-designja, az app tokenjeivel +
   a METU-arculat navy kiegészítőjével. A gerinc MINDEN méretben BAL oldalon áll, a kártyák
   jobbra folynak (2026-08-12 user-döntés: "balra igazítva, ez az, profi"); nagy képernyőn
   csak keskenyebb, középre zárt oszlop lesz belőle. A régi húzogatós nézet CSS-e (tl-*)
   ezzel a blokkal együtt távozott - az új osztályok tl2- előtagúak. */
.tl2 { --tl2-navy: #013A72; --tl2-halvany: #E5EDF4; --tl2-sp: 74px; }
html[data-theme='dark'] .tl2 { --tl2-navy: #2f5f96; --tl2-halvany: #1c2b3b; }

.tl2-wrap { position: relative; padding: 6px 0 30px; }
.tl2-wrap::before { content: ''; position: absolute; left: var(--tl2-sp); top: 0; bottom: 0; width: 2px; background: var(--tl2-halvany); transform: translateX(-1px); }

.tl2-row { position: relative; margin: 0 0 8px; padding-left: calc(var(--tl2-sp) + 26px); min-height: 14px; }
.tl2-row--honap { padding-left: 0; margin: 20px 0 14px; height: 34px; }
.tl2-honap { position: absolute; left: var(--tl2-sp); transform: translateX(-50%); display: inline-block; width: 60px; text-align: center; background: var(--tl2-navy); color: #fff; border-radius: 9px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; padding: 4px 2px 3px; line-height: 1.15; }
.tl2-honap i { display: block; font-style: normal; font-weight: 400; font-size: .62rem; opacity: .75; }

.tl2-row--ma { padding-left: 0; height: 22px; margin: 14px 0; }
.tl2-ma-vonal { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: color-mix(in srgb, var(--hot) 55%, transparent); }
.tl2-ma-chip { position: absolute; left: var(--tl2-sp); top: 50%; transform: translate(-50%, -50%); background: var(--hot); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .04em; border-radius: 999px; padding: 3px 12px; white-space: nowrap; }

/* tanév-sáv: teljes szélességű, halvány - SZÁNDÉKOSAN nem kártya (2026-07-29 szabály) */
/* az idoszak-szalagok tavolabb mindentol (2026-08-12, user-keres) */
.tl2-row--tanev { margin: 26px 0; }
.tl2-tanev { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; background: var(--tl2-halvany); border-radius: 999px; padding: 7px 18px; cursor: default; max-width: 720px; margin: 0 auto; text-align: center; }
.tl2-tanev[role='button'] { cursor: pointer; }
.tl2-tanev-cim { font-size: .8rem; font-weight: 700; color: color-mix(in srgb, var(--tl2-navy) 80%, var(--ink)); }
html[data-theme='dark'] .tl2-tanev-cim { color: var(--ink); }
.tl2-tanev-mikor { font-size: .72rem; color: var(--ink-2); }

.tl2-dot { position: absolute; left: var(--tl2-sp); top: 12px; transform: translateX(-50%); width: 13px; height: 13px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--line); }
.tl2-dot--feladat { background: var(--brand); border-radius: 4px; }
.tl2-dot--surgos { background: var(--hot); }
/* NAP-CIMKE a gerincen (2026-08-12): minden uj nap elso tetelenel, a het napjaval */
.tl2-nap { position: absolute; left: var(--tl2-sp); top: -30px; transform: translateX(-50%); z-index: 1; background: var(--paper-2); border: 1px solid var(--line-2); color: var(--ink-2); font-size: .66rem; font-weight: 800; letter-spacing: .03em; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.tl2-nap i { font-style: normal; font-weight: 600; opacity: .7; margin-left: 3px; }
.tl2-row--card { margin-top: 14px; }
.tl2-row--card:has(.tl2-nap) { margin-top: 46px; }
.tl2-row--card + .tl2-row--card:not(:has(.tl2-nap)) { margin-top: 0; }
/* CONNECTOR: halvany vonal a gerinctol a kartyaig - a potty es a kartya osszetartozik */
.tl2-row--card::before { content: ''; position: absolute; left: var(--tl2-sp); top: 18px; width: 22px; height: 2px; background: var(--tl2-halvany); }
/* mini jelmagyarazat */
.tl2-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 0 0 12px; font-size: .74rem; color: var(--muted); }
.tl2-leg-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #2f6fe0; vertical-align: -1px; margin-right: 5px; }
.tl2-leg-dot--feladat { border-radius: 3px; background: var(--brand); }
.tl2-leg-dot--surgos { border-radius: 3px; background: var(--hot); }
.tl2-leg-csik { display: inline-block; width: 22px; height: 9px; border-radius: 4px; background: var(--tl2-halvany); vertical-align: -1px; margin-right: 5px; }

.tl2-card { border: 1px solid var(--line); border-left-width: 4px; border-radius: 11px; background: var(--card); padding: 8px 12px; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; max-width: 640px; }
.tl2-card:hover { border-color: var(--line-2); transform: translateY(-1px); box-shadow: 0 3px 12px rgba(0, 0, 0, .07); }
.tl2-card--kiemelt { border-left: 4px solid var(--yellow-deep); }
.tl2-card--feladat { border-left-color: var(--brand); }
.tl2-card--surgos { border-left-color: var(--hot); }
.tl2-card--kapcsol { outline: 2px dashed var(--hot); outline-offset: 2px; }
.tl2-flash { animation: tl2Villan 1.5s ease-out; }
@keyframes tl2Villan { 0% { box-shadow: 0 0 0 3px var(--hot); } 100% { box-shadow: 0 0 0 3px transparent; } }
.tl2-cim { font-weight: 700; font-size: .92rem; color: var(--ink); overflow-wrap: anywhere; }
.tl2-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: .78rem; color: var(--ink-2); margin-top: 2px; }
.tl2-meta > span:first-of-type { color: var(--ink); font-weight: 600; }
.tl2-owner { color: var(--muted); }
.tl2-tag { font-style: normal; font-size: .66rem; font-weight: 700; letter-spacing: .03em; padding: 1px 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line); }
.tl2-tag--fuggo { border-style: dashed; }
.tl2-meet { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--hot); text-decoration: none; border: 1px solid color-mix(in srgb, var(--hot) 40%, transparent); border-radius: 999px; padding: 2px 10px; }
.tl2-meet:hover { background: var(--hot-100); color: var(--hot); }

.tl2-linkek { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tl2-linkchip { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; color: var(--brand-text); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; cursor: pointer; font-family: var(--ff); }
.tl2-linkchip:hover { border-color: var(--hot); color: var(--hot); }
.tl2-linkchip svg { width: 11px; height: 11px; }

.tl2-gombok { display: flex; gap: 6px; margin-top: 8px; }
.tl2-gomb { padding: 3px 9px; }
.tl2-gomb svg { width: 13px; height: 13px; }

.tl2-kapcsolosav { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; background: var(--hot-100); border: 1px solid color-mix(in srgb, var(--hot) 40%, transparent); color: var(--hot); font-size: .82rem; font-weight: 700; border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; }
.tl2-kapcsolosav svg { width: 15px; height: 15px; flex: none; }

.tl2-fold { margin: 0 0 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); padding: 0; }
.tl2-fold > summary { cursor: pointer; padding: 9px 14px; font-size: .84rem; font-weight: 700; color: var(--ink-2); list-style: none; }
.tl2-fold > summary::-webkit-details-marker { display: none; }
.tl2-fold > summary::before { content: '▸ '; }
.tl2-fold[open] > summary::before { content: '▾ '; }
.tl2-fold--mult > div { padding: 0 12px; }
.tl2-park { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 12px; }
.tl2-parkkartya { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; text-align: left; border: 1px dashed var(--line-2); border-radius: 9px; background: var(--paper-2); padding: 7px 11px; cursor: pointer; font-family: var(--ff); }
.tl2-parkkartya:hover { border-color: var(--hot); }
.tl2-parkcim { font-size: .84rem; font-weight: 600; color: var(--ink); }

/* sor-beúszás (finom, csak megjelenéskor; reduced-motion alatt kikapcsol) */
.tl2-row { animation: tl2Be .4s ease-out both; }
@keyframes tl2Be { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- NAGY KÉPERNYŐ (>=1100px): keskenyebb, középre zárt oszlop, a gerinc balra marad.
   A 2026-08-12-én kipróbált váltakozó (középső gerinces) változat a user döntése szerint
   eldobva - ha valaha mégis kellene, a git történetében megvan. ---- */
@media (min-width: 1100px) {
  .tl2 .orv-scroll > * { max-width: 1000px; margin-left: auto; margin-right: auto; }
  .tl2-wrap { --tl2-sp: 92px; }
  .tl2-row--card { padding-left: calc(var(--tl2-sp) + 34px); }
  .tl2-row--card::before { width: 28px; }
  .tl2-row--card .tl2-card { max-width: 780px; }
}

@media (max-width: 720px) {
  .tl2 { --tl2-sp: 58px; }
  .tl2-honap { width: 52px; font-size: .66rem; }
  .tl2-row { padding-left: calc(var(--tl2-sp) + 22px); }
}

@media (prefers-reduced-motion: reduce) {
  .tl2-row { animation: none; }
  .tl2-card, .tl2-card:hover { transition: none; transform: none; }
  .tl2-flash { animation: none; box-shadow: 0 0 0 3px var(--hot); }
}

/* -- VISSZAÁLLÍTVA 2026-08-10 (teljes kör): a régi idővonal-blokk törlése tévedésből
   NEM-idővonal szabályokat is vitt (posta-hub scroll-lánc, po-*, cs-*...) - emiatt a
   Posta görgetője 0 magasságúra omlott. Itt a HEAD-beli eredeti szakasz áll a POSTA
   MOBIL-JAVITASOK határig, a tiszta .tl- (régi húzogatós idővonal) szabályok nélkül. -- */
/* ================= IDŐVONAL (TimelineView, 2026-07-28) =================
   Saját DOM-idővonal: natív görgetés + abszolút pozicionált elemek + SVG él-réteg.
   Szín-szabály: --brand szürke a szerkezet, --hot piros CSAK a MA-vonal, a kézi élek
   és az aktív kijelölés. Asztali = vízszintes fő-tengely, mobil = függőleges. */
.tlv { padding-bottom: 8px; }
/* overflow-anchor: none - a böngésző saját "scroll anchoring"-ja méretváltozáskor
   belekorrigálna a zoom-horgonyzásunkba, és elugrana a fókusz (2026-07-28 mérés) */
/* az idő-tengelyre merőlegesen NINCS görgetés (user-szabály): asztalon nincs függőleges,
   mobilon nincs vízszintes scroll - a kereszt-méret úgyis a képernyőhöz igazodik */
/* a sarok-gombok egy rácsnyival lejjebb: a ragadós MA/hónap feliratok alá ne lógjanak */
/* két osztály, mert a lejjebb definiált .tl-cbtn alapszabály (.68rem) különben felülüti */
/* LAKAT: az elrendezés zárva/nyitva - alapból ZÁRVA (a kártyák nem mozdíthatók) */
/* mobilon kisebb lakat/rács (user-kérés) - az asztali méret marad */
/* zárt állapotban a kártya nem "fogható" - a koppintás továbbra is szerkesztőt nyit */
/* ragadós jelölő-réteg: a hónapnevek és a MA a sáv görgetésekor is a képernyőn maradnak
   (vízszintes módban felül tapadnak, függőlegesben a bal szélen) */
/* TANÉV RENDJE párhuzamos sáv-csíkjai (a hónapnevek alatt, mindig láthatóan) */
/* HÓNAP-felirat: NAGY, vastag, jól látható (user-kérés: sokkal nagyobb) */
/* a hónapnév PIROS (user-döntés 2026-07-28: az idő-szerkezet fő tájékozódási pontja) */
/* HÓNAP-HATÁR: nagy, jól látható keresztvonal a teljes sávon át */
.is-horiz .tl-month-tag span { left: 8px; }
.is-vert .tl-month-tag span { top: 8px; }
/* A VONAL: a szerkezet gerince - --brand szürke, nem piros (a piros az aktívé) */
/* napszám (+ ránagyítva a nap neve): jól olvasható, a hétfő kiemelve, hétvége halvány */
/* BAL PANEL: dátum nélküli feladatok - az idővonal FÖLÉ úszik (overlay), ki-becsukható */
/* becsukott panel füle (bal felső sarok) */
/* a panelből húzott feladat szellem-kártyája - fixed, hogy a panel overflow-ja ne vágja le */

/* gombostűk (állomás-pontok) a vonalon; a többnapos esemény SÍNKÉNT fut (SVG) */
/* RÉTEGREND (2026-08-05, user-jelzés: „a feliratok z-indexe nem nő"): az esemény-feliratok
   ugyanazon a szinten (5) ültek, mint a feladatkártyák, ezért a DOM-sorrend döntött - a
   később kirajzolt kártyák TAKARTÁK a feliratokat. A felirat mostantól a kártya FÖLÖTT van
   (9), és amire rámutatsz, az mindig legelöl (30). A háttér is átlátszatlanabb, hogy a
   takarásba kerülő rész is olvasható maradjon. */
/* az Outlook-tükör mini-események felirat nélkül (csak pötty, cím rámutatásra) - zsúfoltság ellen */
/* a ✎ csak a felirat fölé érve jelenik meg - alapból nem szemetel */

/* VONATSÍNEK (SVG): leágazó-visszatérő színes sínek a fővonal két oldalán */

/* skála-csúszka (asztali) + mobil zoom-sáv */

/* KICSI (egysoros) feladatkártyák - a teljes kártya a Feladatok nézeté; itt címke jelleg,
   NEM vastag betűvel (user-kérés: ne legyen minden bold). A bal szegély színe a kapcsolt
   esemény színe (inline), magas prioritásnál piros. */

/* él-réteg: a kártyák ALATT fut (z 2 < kártya z 5) - az összekötő vonal más kártyák
   alatt folytatódik és a túloldalon bukkan ki, kártyát SOHA nem takar (user-szabály) */
/* HORGONY: a kártya fix origója az idővonalon (dátum vagy a kapcsolt esemény sínje) */
@keyframes tlDash { to { stroke-dashoffset: -15; } }

/* halványítás: szem-kapcsolóval előhozott múlt/kész/rejtett + kereső nem-találat */

/* összekötés-módban a kártya nem drag-elhető vizuális jelzése */
.is-connect .tl-card { cursor: crosshair; }

/* sötét téma */
html[data-theme='dark'] .tl-scroll { background: var(--paper); }
html[data-theme='dark'] .tl-card { box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
html[data-theme='dark'] .tl-ev-dot { box-shadow: 0 0 0 2px var(--paper); }


/* SABLONVALASZTO egy helyen (2026-07-23): asztali hubon a bal oszlop a sablontar, a
   valaszto rejtve; MOBILON forditva - a lista nem virit minden ful alatt, helyette a
   Tartalom ful valasztoja az egyetlen sablonvalaszto. */
.nm-inline .nm-topicdrop { display: none; }
@media (max-width: 720px) {
  .nm-inline .nm-topicdrop { display: block; }
  .posta-hub .tp-listcol { display: none; }
}

/* TEMASABLON-VALASZTO (2026-08-05 ujratervezes): kereso + csoport-chipek + koppinthato
   talalatok a ~200 elemes natív legordulo helyett (mobilon kereshetetlen volt) */
.nm-topicsearch { width: 100%; }
.nm-topicgroups { margin-top: 8px; }
.nm-topichits { margin-top: 8px; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: var(--paper-2); }
.nm-topichit { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: var(--card); padding: 9px 11px; cursor: pointer; font-family: var(--ff); font-size: .86rem; color: var(--ink); }
.nm-topichit:hover, .nm-topichit:focus-visible { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--card)); }
.nm-topichit .t { flex: 1 1 auto; line-height: 1.3; }
.nm-topichit .g { flex: 0 0 auto; font-size: .64rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--brand-text); background: var(--brand-100); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.nm-topicempty { margin: 4px 2px; font-size: .8rem; color: var(--muted); }
.nm-topicactive { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nm-topicon { flex: 1 1 auto; min-width: 0; font-size: .88rem; font-weight: 700; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--brand) 10%, var(--card)); border: 1.5px solid var(--brand); }

/* mobilon a Sablontar/Mentett lista-valto halott gomb lenne (a lista rejtve) - eltuntetjuk */
@media (max-width: 720px) { .posta-hub .tpv > .cat-block-head .viewtoggle { display: none; } }

/* GORGETES-JAVITAS (2026-07-23): a .posta-hub (view-pane) abszolut, sajat gorgeto nelkul -
   a lista-fulon a .catalog belso gorgetoje visz, de az Uj level fulon (mobilon statikus .tpv)
   SENKI nem birtokolta a gorgetest, ezert "beragadt". Mobilon a hub maga gorget (fulenkent
   pontosan egy aktiv gorgeto van), a fly-in nem engedi tovabb a gorgetest a hatternek. */
@media (max-width: 720px) {
  .posta-hub { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
.posta-hub--fly { overscroll-behavior: contain; }

/* PRELOADER (2026-07-23): porgo gyuru + felirat az indulasi es a Matrix-betoltesi
   allapothoz - a statikus "betoltese..." szoveg helyett eloven jelzi, hogy dolgozunk */
.load-box { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--muted); font-size: 1rem; animation: loadFade .3s ease both; }
.load-spin { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--hot); animation: loadSpin .8s linear infinite; }
@keyframes loadSpin { to { transform: rotate(360deg); } }
@keyframes loadFade { from { opacity: 0; } to { opacity: 1; } }

/* TELJES eredeti level a Postaban (2026-07-23): a gist melletti lenyithato teljes szoveg */
/* jobbra zart (2026-08-12, user-keres); a kinyitott teljes szoveg teljes szelessegu marad */
.po-fullmail { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin: 4px 0 0; }
.po-fullmail .po-fullbody { flex: 1 1 100%; }
.po-fullbody { flex-basis: 100%; min-width: 0; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .92rem; line-height: 1.55; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin: 4px 0 0; }
.po-wiz-orig { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
/* A KIMONDOTT BEJELENTO IRASBAN (2026-08-19): ugyanaz a mondat, amit a felolvasas elmond -
   felado + cimzett-kor. Halk, de mindig ott van, hangmod nelkul is. */
.po-wiz-bemondo { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--ink-2); background: var(--paper-2); border-radius: 8px; padding: 8px 12px; }
/* A LEVEL A 2/3 LEPESEN (2026-08-19): alapbol nyitott panel, hogy a valasz diktalasa kozben is
   olvashato legyen, amire valaszolunk. A blokk SZANDEKOSAN a .po-fullbody UTAN all: azonos
   specificitason a kesobbi szabaly nyer, elotte a levelpanel margoja neman hatastalan lenne. */
.po-wiz-levelpanel { border: 1px solid var(--line); border-radius: 10px; padding: 0 12px 8px; background: var(--card); }
.po-wiz-levelpanel > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; font-size: .84rem; }
.po-wiz-levelpanel-b { margin: 8px 0 0; }

/* FELOLVASASI TEMPO chipek (2026-07-23): 1,5 / 1,75 / 2 / 2,3 - alap 1,75 */
.po-speed { display: inline-flex; gap: 4px; align-items: center; }
.po-speed-b { padding: 4px 8px; font-size: .76rem; font-weight: 700; font-family: var(--ff); color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.po-speed-b.is-on { background: var(--hot); border-color: var(--hot); color: #fff; }

/* ---- Stat nezet (2026-07-28): a szak szamokban - letszamok, felveteli, spec, oktatok, naptar ---- */
/* min(340px,100%) + min-width:0: a track minimuma NE a legszelesebb belso tartalom
   (720px-es tabla/diagram) legyen - e nelkul mobilon minden kartya desktop-szeles maradt,
   es a belso overflow-x gorgetok sosem kapcsoltak be (2026-07-28 mobil-javitas) */
.stv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 14px; align-items: start; }
.stv-card { padding: 14px 16px; min-width: 0; }
.stv-card--wide { grid-column: 1 / -1; }
.stv-h { margin: 0 0 10px; font-size: .95rem; font-weight: 800; color: var(--ink); }
/* naptar: nagy mai datum + 7 napos nevnap-sav */
.stv-today { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-bottom: 10px; }
.stv-today-date { font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.stv-today-name { color: var(--ink-2); }
.stv-week { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.stv-day { flex: 1 0 96px; min-width: 96px; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.stv-day.is-today { border-color: var(--hot); box-shadow: inset 0 0 0 1px var(--hot); }
.stv-day-dow { font-size: .72rem; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.stv-day.is-today .stv-day-dow { color: var(--hot); }
.stv-day-date { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.stv-day-name { font-size: .8rem; color: var(--ink-2); overflow-wrap: anywhere; }
/* tablazatok: sajat vizszintes gorgeto (mobilon a swipe-nezetvaltast is ez kapcsolja ki) */
.stv-tablewrap { overflow-x: auto; }
.stv-table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.stv-table th, .stv-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.stv-table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.stv-thsub { font-size: .68rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.stv-table td:first-child { white-space: normal; }
.stv-num { font-variant-numeric: tabular-nums; }
.stv-sum td { font-weight: 800; border-top: 2px solid var(--line-2); }
.stv-dim { color: var(--muted); font-size: .82em; }
/* delta: zold fel / piros le - itt a szin JELENTES (novekedes/csokkenes), nem dekoracio */
.stv-delta { font-weight: 800; font-variant-numeric: tabular-nums; }
.stv-up { color: #1a7f37; }
.stv-down { color: #b3261e; }
html[data-theme='dark'] .stv-up { color: #4ecb71; }
html[data-theme='dark'] .stv-down { color: #ff8a80; }
/* szam-csempek (cc-totals rokona, de sajat racsban) */
.stv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 8px 0; }
.stv-tile { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.stv-tile b { font-size: 1.3rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.stv-tile span { font-size: .72rem; color: var(--muted); line-height: 1.3; }
.stv-spec { margin-bottom: 10px; }
.stv-spec-title { font-size: .8rem; font-weight: 800; color: var(--ink-2); margin: 8px 0 4px; }
.stv-mozgas { margin-top: 8px; }
/* OKTATÓI ÓRASZÁM-tábla (Stat → Oktatók, a kártya elején) */
/* A kártya KÉT rács-oszlopot foglal: egy oszlopban a 17 soros tábla annyira megnyújtja,
   hogy a többi stat-kártya a képernyőn kívülre kerül (2026-07-30 user-visszajelzés:
   „hova lett a többi stat?"). Telefonon a rács egyoszlopos, ott a span-t vissza kell venni,
   különben a grid IMPLICIT második oszlopot nyitna, és minden elcsúszna. */
.stv-card--dupla { grid-column: span 2; }
.stv-oraszam { margin: 2px 0 12px; }
.stv-orapick { margin: 0 0 8px; }
.stv-list { margin: 4px 0 8px; padding-left: 20px; font-size: .8rem; line-height: 1.6; color: var(--ink-2); }
.stv-list li { margin-bottom: 5px; }
/* a hivatalos szabályzat-forrás linksora a Szabályok nézet tetején */
.szv-hivatalos { font-size: .82rem; color: var(--ink-2); margin: 0 0 12px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 10px; background: color-mix(in srgb, var(--brand) 4%, var(--card)); }
.szv-hivatalos a { color: var(--brand-text); font-weight: 700; }
/* törvényi óraszám-normák: nyitható blokk a tábla alatt */
.stv-torv { margin-top: 10px; border: 1px dashed var(--line); border-radius: 10px; padding: 2px 10px 8px; background: color-mix(in srgb, var(--brand) 3%, var(--card)); }
.stv-torv > summary { cursor: pointer; font-size: .78rem; font-weight: 700; color: var(--ink-2); padding: 7px 2px; user-select: none; }
.stv-torv-mj { color: var(--muted); font-weight: 400; font-size: .82em; }
.stv-oraszam tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ink) 3%, transparent); }
/* MEGOSZLÁS-SÁV. Három, egymástól FÜGGETLEN dolgot mutat, ezért három vizuális réteg:
   1. kitöltés = a tényleges óra összetétele (szürke magyar + barna angol),
   2. függőleges vonal = az ELVÁRT óraszám,
   3. piros farok a sáv alatt = az eltérés (tömör: túlóra, szaggatott: ennyivel kevesebb).
   A piros itt SEHOL nem jelenti az angolt - az a barna. */
.stv-hcell { width: 30%; min-width: 84px; }
.stv-htrack { position: relative; display: block; width: 100%; height: 14px; }
.stv-htrack::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.stv-hbar { position: absolute; top: 0; left: 0; display: flex; height: 9px; min-width: 3px; border-radius: 999px; overflow: hidden; }
.stv-hseg { display: block; min-width: 2px; }
.stv-hseg--valos { background: color-mix(in srgb, var(--brand) 58%, var(--card)); }
.stv-hseg--en { background: var(--en); }
.stv-hmark { position: absolute; top: -2px; width: 2px; height: 13px; margin-left: -1px; border-radius: 1px; background: var(--ink); opacity: .7; }
.stv-hdiff { background: var(--hot); }
.stv-hdiff--alul { background: transparent; border: 1px dashed var(--hot); }
.stv-leg--mark { background: var(--ink); opacity: .7; }
.stv-htrack .stv-hdiff { position: absolute; top: 11px; height: 3px; border-radius: 2px; }
.stv-htrack .stv-hdiff--alul { top: 10px; height: 5px; }
/* A jelmagyarázat négyzetei a közös .stv-bar osztályt kapják, ami KÉSŐBB áll a fájlban,
   ezért az ő szürke háttere nyerte az egyosztályos szabályaimat: mind az öt jel szürke lett.
   Két osztállyal írjuk felül, a jelmagyarázatra szűkítve. */
.stv-oraszam .stv-leg .stv-hseg--valos { background: color-mix(in srgb, var(--brand) 58%, var(--card)); }
.stv-oraszam .stv-leg .stv-hseg--en { background: var(--en); }
.stv-oraszam .stv-leg .stv-leg--mark { background: var(--ink); opacity: .7; }
.stv-oraszam .stv-leg .stv-hdiff { background: var(--hot); }
.stv-oraszam .stv-leg .stv-hdiff--alul { background: transparent; border: 1px dashed var(--hot); }
/* SÁRGA = szabály szerint módosított érték (idegen nyelvi szorzó, órakedvezmény), nem nyers
   adat. Szándékosan nem piros: a piros ebben a táblában az elvárttól való eltérést jelenti. */
.stv-sarga { background: color-mix(in srgb, #e8b004 30%, transparent); border-radius: 5px; padding: 0 5px; cursor: help; box-decoration-break: clone; }
html[data-theme='dark'] .stv-sarga { background: color-mix(in srgb, #e8b004 34%, transparent); }
.stv-elv { color: var(--ink-2); }
.stv-ennum { color: var(--brand-text); }
.stv-ennum b { color: var(--en); }
/* Az eltérés-jelvény: KÜLÖNÁLLÓ pirulaként ül a szám mellett, hogy semmiképp ne olvasódjon
   az összeghez tartozó műveletnek („14 +2” = 16?). A ▲/▼ is ezt szolgálja. */
.stv-delta { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 999px; font-size: .62rem; font-weight: 800; letter-spacing: .02em; vertical-align: 1px;
  color: var(--hot); background: color-mix(in srgb, var(--hot) 13%, transparent); border: 1px solid color-mix(in srgb, var(--hot) 34%, transparent); }
.stv-delta--alul { color: var(--hot); background: transparent; border-style: dashed; }
.stv-ths { display: none; }   /* rövid fejléc-szó: csak telefonon (lásd a 720px-es blokkot) */
.stv-oraszam .stv-table td:first-child { white-space: normal; }
.stv-fo { margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  background: color-mix(in srgb, var(--brand) 14%, var(--card)); color: var(--brand-text); border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--line)); }
.stv-star { margin-left: 4px; color: var(--hot); font-weight: 800; cursor: help; }
.stv-sum td { border-top: 2px solid var(--line-2); border-bottom: none; font-weight: 800; color: var(--ink); }
.stv-names { margin: 2px 0; font-size: .85rem; color: var(--ink-2); }
.stv-names-label { font-weight: 700; }
.stv-note { margin: 6px 0 0; font-size: .85rem; color: var(--ink-2); line-height: 1.5; }
.stv-src { margin: 8px 0 0; font-size: .74rem; color: var(--muted); line-height: 1.4; }
.stv-src-inline { font-size: .78em; color: var(--muted); }
.stv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
@media (max-width: 720px) {
  .stv-grid { grid-template-columns: minmax(0, 1fr); }
  .stv-card { padding: 12px; }
  /* egyoszlopos rácsban a span 2 IMPLICIT oszlopot nyitna - itt vissza kell venni */
  .stv-card--dupla { grid-column: auto; }
  /* TELEFON: a tábla eredetileg oldalra csúszott, és pont az „Angol” oszlop (a lényeg)
     esett ki a képből. Szűkebb cellák + tördelhető név: mind a 6 oszlop kifér. */
  .stv-oraszam .stv-table th, .stv-oraszam .stv-table td { padding: 5px 3px; font-size: .78rem; }
  .stv-oraszam .stv-table th { font-size: .6rem; white-space: normal; }
  .stv-oraszam .stv-thl { display: none; }   /* hosszú fejléc-szó: csak asztali gépen */
  .stv-oraszam .stv-ths { display: inline; }
  /* TELEFON: hét oszlop nem fér ki, és a sáv finom részletei (elvárt-jel, piros farok)
     44 px-en úgysem olvashatók - ezért a SÁV OSZLOPA rejtve marad, a számok maradnak.
     Az eltérést így is látod: az Össz mellett ott a +N / -N. A „főállású” jelvény is
     elhagyható, mert Elvárt óraszáma amúgy is csak a főállásúaknak van. */
  .stv-oraszam .stv-table tr > *:nth-child(2) { display: none; }
  .stv-oraszam .stv-fo { display: none; }
  .stv-delta { font-size: .62rem; margin-left: 3px; }
  .stv-today-date { font-size: 1.1rem; }
  .stv-day { flex-basis: 84px; min-width: 84px; }
}
/* a stat-kartyak NEM kattinthatok - a .cc-card orokolt pointer/hover-emelkedes felreert-
   heto interakciot igerne (atvilagitasi talalat) */
.stv-card, .stv-card:hover { cursor: default; transform: none; }
.stv-card:hover { box-shadow: var(--shadow-1); border-color: var(--line); }
html[data-theme='dark'] .stv-card:hover { box-shadow: var(--shadow-1); }
/* animalt oszlopdiagramok (konyvtar nelkul): belepeskor alulrol nonek fel */
/* recharts-diagramok (2026-07-28): a fill CSS-változóból jön, sötét témában is jó */
:root { --stv-soft: color-mix(in srgb, var(--brand) 42%, var(--card)); }
.stv-rechart { margin: 8px 0 4px; }
.stv-rechart svg { overflow: visible; }
.stv-bar--terv2 { background: var(--brand); }
/* Csengetési rend: sáv-sorok nagy idő-tipográfiával, köztük szünet-elválasztók;
   a MOST futó sáv/szünet piros (szürke alap, piros aktív - szabály) */
.cs-status { font-size: .86rem; font-weight: 600; color: var(--ink-2); margin: 2px 0 10px; }
.cs-status.is-live { color: var(--hot); }
.cs-rows { margin: 4px 0 10px; }
.cs-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.cs-no { font-weight: 800; font-size: .88rem; color: var(--ink-2); min-width: 86px; }
.cs-time { font-family: var(--ff-display); font-weight: 800; font-size: 1.22rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.cs-live { color: var(--hot); font-weight: 800; font-size: .8rem; white-space: nowrap; }
.cs-row.is-now { border-color: var(--hot); background: color-mix(in srgb, var(--hot) 7%, var(--card)); }
.cs-row.is-now .cs-time, .cs-row.is-now .cs-no { color: var(--hot); }
/* A sáv-sor KATTINTHATÓ: lenyitva megmutatja, abban az idősávban ki, hol és mit tart.
   Az egész sor a koppintó-célpont (telefonon a nyíl önmagában túl kicsi lenne). */
/* a color: inherit NEM elhagyhato - a <button> kulonben a rendszer fekete ButtonText szinet
   orokli, ami sotet temaban olvashatatlan (a .cs-time-nak nincs sajat szine, csak ez adja) */
.cs-row--btn { width: 100%; font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .12s, background .12s; }
.cs-row--btn:hover { border-color: var(--line-2); }
.cs-db { font-size: .72rem; font-weight: 700; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
/* A NYÍL mindig a sor JOBB SZÉLÉN álljon, akkor is, ha nincs „most” jelzés vagy darabszám -
   így a lenyitó gombok egy függőleges vonalban futnak (2026-07-31 user-kérés). */
.cs-chev { margin-left: auto; padding-left: 8px; font-size: .8rem; color: var(--ink-2); transition: transform .15s; }
.cs-row--btn.is-open .cs-chev { transform: rotate(180deg); }
.cs-row--btn.is-open { border-color: var(--line-2); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cs-fold { border: 1px solid var(--line-2); border-top: none; border-radius: 0 0 12px 12px; background: color-mix(in srgb, var(--brand) 4%, var(--card)); padding: 8px 12px 10px; }
.cs-fold-empty { margin: 4px 0; font-size: .8rem; color: var(--muted); }
.cs-napok { margin: 2px 0 8px; }
/* „Most” blokk a Tudnivalók fölött: nap és dátum EGY sorban, alatta a pontos idő és az
   aktuális sáv. Teljes szélességű (stv-card--wide), tehát nem nyit külön oszlopot a rácsban. */
/* a harmadik oszlop: két kártya egymás alatt, EGY rács-cellában */
.cs-col3 { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Oszlop-arányok CSAK a Csengetésben (a Stat rácsát nem érinti): az első oszlopban futnak
   a hosszú sáv-sorok és a lenyitott órák, ezért szélesebb; a harmadik ennyivel keskenyebb.
   A töréspont alatt marad az automatikus (egyoszlopos) elrendezés. */
@media (min-width: 1080px) {
  .csv .stv-grid { grid-template-columns: 1.18fr 1fr 0.82fr; }
}
.cs-most { text-align: center; }
.cs-most-fej { font-family: var(--ff-display); font-size: 1.32rem; font-weight: 800; letter-spacing: var(--head-ls); color: var(--ink); font-variant-numeric: tabular-nums; }
.cs-most-ora { font-family: var(--ff-display); font-size: 2.6rem; font-weight: 800; line-height: 1.15; color: var(--hot); font-variant-numeric: tabular-nums; margin: 2px 0; }
/* a másodperc halványabb és kisebb: a percet ne nyomja el, de lássad, hogy él az óra */
.cs-mp { font-size: .5em; font-weight: 700; opacity: .62; vertical-align: .55em; letter-spacing: .01em; }
.cs-most .cs-status { margin: 0; }
@media (max-width: 720px) { .cs-most-fej { font-size: 1.12rem; } .cs-most-ora { font-size: 2.1rem; } }
/* képzés szerinti csoportok a lenyitott sávban: BA / MA / angol - bal oldali színcsík */
.cs-kep { border-left: 3px solid var(--line-2); padding-left: 9px; }
.cs-kep--ba { border-left-color: var(--g0); }
.cs-kep--ma { border-left-color: var(--g1); }
.cs-kep--en { border-left-color: var(--en); }
.cs-kep-n { font-size: .68rem; font-weight: 700; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.cs-fold-day { margin-bottom: 8px; }
.cs-fold-day:last-child { margin-bottom: 0; }
.cs-fold-dh { display: flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); margin: 4px 0 3px; }
.cs-fold-day.is-today .cs-fold-dh { color: var(--hot); }
.cs-ma { font-size: .64rem; font-weight: 800; text-transform: none; letter-spacing: 0; color: #fff; background: var(--hot); border-radius: 999px; padding: 1px 7px; }
.cs-fold-row { display: grid; grid-template-columns: 106px minmax(0, 1fr) 150px 96px; gap: 8px; align-items: baseline; padding: 4px 0; border-top: 1px dashed var(--line); font-size: .84rem; }
.cs-f-ido { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 700; }
.cs-f-targy { font-weight: 700; color: var(--ink); }
.cs-f-okt { color: var(--ink-2); }
.cs-f-terem { color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  /* telefonon egymás alá: a négyoszlopos rács itt olvashatatlan lenne */
  .cs-fold-row { grid-template-columns: 1fr; gap: 1px; padding: 6px 0; }
  .cs-f-terem { text-align: left; }
  .cs-no { min-width: 62px; font-size: .8rem; }
  .cs-time { font-size: 1.02rem; }
  .cs-row { gap: 8px; padding: 9px 10px; }
}
.cs-break { text-align: center; font-size: .7rem; color: var(--muted); padding: 4px 0; }
.cs-break.is-lunch { font-weight: 700; color: var(--ink-2); }
.cs-break.is-now { color: var(--hot); font-weight: 800; }
/* Szünetek és fontos tanévi dátumok: csoport-színkód (--csc) a kategória-palettából -
   szünetek zöld, ünnepnapok lila, félév-szerkezet kék; a dátum színes gombóc,
   az elmúlt tétel halvány, az éppen tartó / a KÖVETKEZŐ piros (piros = aktív) */
.cs-c-szunet { --csc: var(--g0); }
.cs-c-unnep { --csc: var(--g2); }
.cs-c-felev { --csc: var(--g1); }
.cs-dgroup-title { display: flex; align-items: center; gap: 7px; }
.cs-dgroup-title i { width: 9px; height: 9px; border-radius: 3px; background: var(--csc); flex: 0 0 auto; }
.cs-datumok { margin: 4px 0 12px; }
.cs-datum { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 10px; margin: 0 0 5px; font-size: .84rem; border: 1px solid var(--line); border-left: 3px solid var(--csc); border-radius: 9px; background: color-mix(in srgb, var(--csc) 4%, var(--card)); }
.cs-datum-nev { flex: 1; }
.cs-datum-mikor { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: .76rem; color: var(--csc); background: color-mix(in srgb, var(--csc) 12%, var(--paper)); border: 1px solid color-mix(in srgb, var(--csc) 30%, transparent); border-radius: 999px; padding: 2px 10px; }
.cs-datum.is-past { opacity: .48; }
.cs-datum.is-now, .cs-datum.is-next { border-color: var(--hot); border-left-color: var(--hot); background: color-mix(in srgb, var(--hot) 6%, var(--card)); }
.cs-datum.is-now .cs-datum-mikor, .cs-datum.is-next .cs-datum-mikor { color: #fff; background: var(--hot); border-color: var(--hot); }
/* mobilon a fix-szélességű dátum összenyomta a neveket (csúnya sortörések) -
   ott a dátum-gombóc a név ALATT áll (2026-07-29 user-észlelés) */
@media (max-width: 720px) {
  .cs-datum { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 10px; }
  .cs-datum-mikor { white-space: normal; }
}
/* fánk-pár (specializáció-megoszlás) */
.stv-donuts { display: flex; gap: 10px; margin: 6px 0 2px; }
.stv-donut { flex: 1; min-width: 0; }
.stv-donut-t { text-align: center; font-size: .72rem; font-weight: 700; color: var(--muted); margin-top: -4px; }
/* IT: az adott teremben órát tartó MD-oktatók sora */
.it-okt { margin-top: 7px; font-size: .76rem; color: var(--ink-2); line-height: 1.45; }
.it-okt-label { font-weight: 700; color: var(--hot); }
.stv-chart { display: flex; gap: 16px; align-items: flex-end; margin: 8px 0 4px; overflow-x: auto; padding: 6px 2px 0; }
.stv-chart-g { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 0 auto; min-width: 52px; }
.stv-chart-bars { display: flex; gap: 5px; align-items: flex-end; height: 108px; }
.stv-barwrap { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.stv-barval { font-size: .68rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.stv-bar { width: 20px; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--brand); transform-origin: bottom; animation: stvBar .55s cubic-bezier(.2, .8, .25, 1) both; }
.stv-bar--hot { background: var(--hot); }
.stv-bar--soft { background: color-mix(in srgb, var(--brand) 42%, var(--card)); }
.stv-bar--terv { background: var(--brand-100); border: 1px dashed var(--brand); }
.stv-bar--mm { background: var(--g1); }
.stv-bar--game { background: var(--g2); }
.stv-chart-x { font-size: .7rem; color: var(--muted); text-align: center; white-space: nowrap; }
@keyframes stvBar { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .stv-bar { animation: none; } }
.stv-leg { display: flex; gap: 12px; flex-wrap: wrap; font-size: .72rem; color: var(--muted); margin: 2px 0 6px; }
.stv-leg span { display: inline-flex; align-items: center; gap: 5px; }
.stv-leg .stv-bar { width: 11px; height: 11px; min-height: 0; border-radius: 3px; animation: none; }
.stv-list { margin: 4px 0 6px; padding-left: 18px; font-size: .85rem; color: var(--ink-2); line-height: 1.55; }
.stv-list li { margin: 3px 0; }
/* mobil: kisebb oszlopok es kozok a diagramokban, hogy tobb ferjen el gorgetes nelkul */
@media (max-width: 720px) {
  .stv-chart { gap: 10px; }
  .stv-chart-bars { height: 92px; gap: 4px; }
  .stv-bar { width: 16px; }
  .stv-chart-g { min-width: 44px; }
}
/* ============================================================
   TANMENET a részletezőben: a leadott tantárgyi leírás alkalmai,
   számozott listaként (sorszám és szöveg külön oszlopban).
   ============================================================ */
.dr-alk-src { font-size: .7rem; color: var(--muted); margin: 4px 0 2px; }
.dr-alk-list { margin: 4px 0 0; padding: 0; list-style: none; }
.dr-alk-list li { display: flex; gap: 9px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .84rem; line-height: 1.45; }
.dr-alk-list li:first-child { border-top: none; }
.dr-alk-n { flex: 0 0 22px; font-weight: 700; color: var(--track); font-variant-numeric: tabular-nums; }
.dr-alk-t { flex: 1 1 auto; color: var(--ink); }
/* ============================================================
   TANMENET a részletezőben: a leadott tantárgyi leírás alkalmai,
   számozott listaként (sorszám és szöveg külön oszlopban).
   ============================================================ */
.dr-alk-src { font-size: .7rem; color: var(--muted); margin: 4px 0 2px; }
.dr-alk-list { margin: 4px 0 0; padding: 0; list-style: none; }
.dr-alk-list li { display: flex; gap: 9px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .84rem; line-height: 1.45; }
.dr-alk-list li:first-child { border-top: none; }
.dr-alk-n { flex: 0 0 22px; font-weight: 700; color: var(--track); font-variant-numeric: tabular-nums; }
.dr-alk-t { flex: 1 1 auto; color: var(--ink); }
/* ================= POSTA MOBIL-JAVITASOK (2026-08-04, telefonos kepernyokepek) =================
   1) A fulsor (Posta / Uj level-Sablontar) ATLATSZO hatterrel lebegett a tartalom folott:
      a main.postav abszolut pozicioja UGYANOTT kezdodott (top 140 = a fulsor teteje), es a
      belso gorgetes a pill-ek ala usztatta a gombokat (merve: gorgetes utan brief.top -40,
      a "Mai levelek" es a "Tovabb: a valaszod" gomb a fulsor moge kerult). Asztalon ez a
      jobbra igazitott, cim melle ulo fulsor-dizajn mukodik; mobilon utkozik.
      Mobilon: a main statikus folyamban megy (a hub gorget, mint a tpv-nel), a fulsor pedig
      sajat hatteru, tapado sav - siman elerheto, es SOSEM takar tartalmat.
   2) A szal-sorok (po-tmsg/dr-tmsg) fix oszlopos flexje a hosszu meselo elotaggal
      egyszavas oszlopba nyomta a szoveget - mobilon a szoveg uj sorba, teljes szelessegben. */
@media (max-width: 720px) {
  .posta-hub .postav { position: static; height: auto; overflow: visible; }
  .posta-hub .posta-tabs { position: sticky; top: 0; z-index: 6; justify-content: flex-start;
    background: var(--paper); padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
  .po-tmsg, .dr-tmsg { flex-wrap: wrap; row-gap: 2px; }
  .po-tmsg .g, .dr-tmsg .g { flex: 1 1 100%; padding-left: 2px; }
}

/* Titkarno javitas-mod (2026-08-04): a meglevo valasz mint alap a 2/3 lepesen */
.po-wiz-base { border: 1px solid var(--line); border-left: 3px solid var(--g0); border-radius: 8px; background: var(--card); padding: 8px 12px; margin-bottom: 8px; }
.po-wiz-base-h { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--g0); margin-bottom: 4px; }
.po-wiz-base-b { font-size: .84rem; line-height: 1.5; white-space: pre-wrap; color: var(--ink-2); }

/* ============ PROJEKTHÉT nézet (2026-08-08) ============ */
.phv-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.phv-tabs button { border: 1px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 999px; padding: 6px 14px; font-size: .82rem; font-weight: 700; cursor: pointer; }
.phv-tabs button.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.phv-days { display: flex; flex-direction: column; gap: 14px; }
.phv-day-h { display: flex; align-items: center; gap: 8px; font-size: .95rem; margin: 0 0 8px; border-bottom: 2px solid var(--line); padding-bottom: 5px; }
.phv-day-n { font-size: .72rem; font-weight: 700; color: var(--ink-3); background: var(--bg-2); border-radius: 999px; padding: 1px 8px; }
.phv-add { margin-left: auto; }
.phv-empty { color: var(--ink-3); margin: 0 0 6px; }
.phv-item { border: 1px solid var(--line); border-left: 4px solid var(--g1); border-radius: 8px; background: var(--card); padding: 8px 11px; margin-bottom: 8px; }
.phv-item.is-kozos { border-left-color: var(--g0); }
.phv-item.is-javasolt { border-style: dashed; }
.phv-item.is-utkozes { border-color: var(--hot); border-left-color: var(--hot); }
.phv-item-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.phv-ido { font-variant-numeric: tabular-nums; font-weight: 800; font-size: .82rem; white-space: nowrap; }
.phv-title { font-weight: 700; font-size: .9rem; }
.phv-status { font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--en); border: 1px dashed var(--en); border-radius: 999px; padding: 1px 8px; }
.phv-status.is-fix { color: var(--g0); border: 1px solid var(--g0); }
.phv-item-btns { margin-left: auto; display: flex; gap: 4px; }
.phv-item-meta { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.phv-chip { font-size: .72rem; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--ink-2); background: var(--bg-2); }
.phv-chip--t { font-weight: 700; color: var(--ink); }
.phv-chip--c { border-color: var(--g1); color: var(--g1); background: transparent; }
.phv-chip--k { border-color: var(--g0); color: var(--g0); background: transparent; }
.phv-desc { font-size: .8rem; color: var(--ink-2); margin: 5px 0 0; }
.phv-src { font-size: .72rem; color: var(--ink-3); margin: 4px 0 0; }
.phv-utk { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--hot); margin: 6px 0 0; }
.phv-utk svg { width: 14px; height: 14px; }
/* kimenetek (naptár / itinerek) */
.phv-outs { display: flex; flex-direction: column; gap: 14px; }
.phv-out { border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; }
.phv-out-h { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg-2); font-size: .85rem; }
/* összecsukható itiner-doboz (2026-08-26): a summary maga a fejléc, saját nyíllal; csukva
   nincs alsó elválasztó (nincs alatta tartalom) - a koppintó-felület a teljes fejléc */
.phv-out--fold > summary { cursor: pointer; list-style: none; }
.phv-out--fold > summary::-webkit-details-marker { display: none; }
.phv-out--fold > summary strong::before { content: '▸ '; color: var(--muted); }
.phv-out--fold[open] > summary strong::before { content: '▾ '; }
.phv-out--fold:not([open]) > summary { border-bottom: 0; }
/* NINCS DUPLA GÖRGETÉS (2026-08-26, mérve: a 420px-es belső görgető a .orv-scroll MELLETT
   második-hetedik sávot adott a Szöveg/itiner füleken) - a kivonat teljes hosszában folyik,
   az EGYETLEN görgető a .orv-scroll. */
.phv-pre { margin: 0; padding: 12px 14px; font: .8rem/1.55 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
/* A LISTA fül kimenet-sávja (2026-08-27): ugyanaz a gombsor (Másolás + PDF), mint a
   szöveg-kimeneteké, de önálló dobozban - a Lista nem OutputPane-ben él. Telefonon a
   gombok a cím alá TÖRNEK (flex-wrap), nem lógnak ki a 390px-ből. */
.phv-lista-sav { border: 1px solid var(--line); border-radius: 10px; background: var(--card); margin-bottom: 12px; flex-wrap: wrap; }
/* szerkesztő-modál */
.phv-modal { position: fixed; inset: 0; background: color-mix(in srgb, #000 45%, transparent); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 12px; z-index: 60; overflow-y: auto; }
.phv-modal-in { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px; width: min(560px, 100%); display: flex; flex-direction: column; gap: 8px; }
.phv-modal-h { display: flex; align-items: center; gap: 8px; }
.phv-modal-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.phv-f { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; font-weight: 700; color: var(--ink-2); flex: 1; min-width: 0; }
.phv-f input, .phv-f select, .phv-f textarea { width: 100%; max-width: 100%; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); padding: 7px 9px; font-size: .85rem; font-weight: 400; }
.phv-frow { display: flex; gap: 8px; flex-wrap: wrap; }
.phv-cohorts { display: flex; gap: 5px; flex-wrap: wrap; }
.phv-cbtn { border: 1px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 999px; padding: 4px 11px; font-size: .78rem; cursor: pointer; }
.phv-cbtn.is-on { border-color: var(--g1); color: var(--g1); font-weight: 700; }
.phv-savok { font-size: .75rem; color: var(--ink-2); background: var(--bg-2); border: 1px dashed var(--line); border-radius: 7px; padding: 6px 9px; margin: 0; }
@media (max-width: 720px) { .phv-frow { flex-direction: column; } .phv-item-btns { margin-left: 0; width: 100%; } }

/* ============ Titkárnő belépő/kilépő kiemelés (2026-08-08, user-döntés) ============ */
/* A belépő piros ÉS finoman lüktet - ez A fő művelet a Postán. A lüktetés árnyék-alapú
   (nem villogás), mobil-barát; reduced-motion alatt kikapcsol. */
.po-titkarbtn { font-weight: 800; animation: poTitkarPulse 1.6s ease-in-out infinite; }
@keyframes poTitkarPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hot) 55%, transparent); }
  55% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--hot) 0%, transparent); }
}
.po-exitbtn { font-weight: 700; }
.po-exitbtn--wiz { margin-left: 8px; padding: 4px 12px; font-size: .76rem; }
@media (prefers-reduced-motion: reduce) { .po-titkarbtn { animation: none; } }

/* ============ KULCSOK nézet (2026-08-08) ============ */
.kv-warn { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--hot); background: color-mix(in srgb, var(--hot) 8%, transparent); border: 1px solid color-mix(in srgb, var(--hot) 30%, transparent); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; }
.kv-warn svg { width: 16px; height: 16px; flex: none; }
.kv-add { margin-bottom: 12px; }
.kv-list { display: flex; flex-direction: column; gap: 10px; }
.kv-card { border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 9px; background: var(--card); padding: 10px 13px; }
.kv-card-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.kv-felulet { font-weight: 800; font-size: .92rem; }
.kv-url { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; color: var(--en); text-decoration: none; }
.kv-url svg { width: 13px; height: 13px; }
.kv-edit { margin-left: auto; }
.kv-rows { display: flex; flex-direction: column; gap: 5px; }
.kv-row { display: flex; align-items: center; gap: 8px; }
.kv-lbl { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); width: 92px; flex: none; }
.kv-val { font-family: ui-monospace, Consolas, monospace; font-size: .88rem; background: var(--bg-2); border-radius: 6px; padding: 3px 9px; user-select: all; }
.kv-val--pw { letter-spacing: .06em; }
.kv-show, .kv-copy { padding: 3px 8px; font-size: .74rem; }
.kv-copy svg { width: 14px; height: 14px; }
/* További linkek egy fiókon belül (2026-08-12): nem külön kártya, mert a jelszó egy
   példányban él. Nagy koppintó-felület (min 34px), és a chipek TÖRHETNEK - a flex:none
   csapdába már belefutottunk máshol, 390px-en semmi nem lóghat ki. */
.kv-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.kv-link { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2, transparent); color: var(--en); text-decoration: none; font-size: .76rem; max-width: 100%; overflow-wrap: anywhere; }
.kv-link svg { width: 13px; height: 13px; flex: 0 0 auto; }
.kv-note { font-size: .8rem; color: var(--ink-2); margin: 8px 0 0; }
.kv-src { font-size: .72rem; color: var(--ink-3); margin: 4px 0 0; }

/* ============ HABILITÁCIÓ nézet (2026-08-10) ============
   MOBILE-FIRST: alapból EGY oszlop, a link-panel a tartalom ALATT. 900px felett
   kétoszlopos, a panel jobbra tapad (sticky). Szürke alap, piros CSAK a lejáró
   határidőre és a hiányzó követelményre. */
.hab-grid { display: flex; flex-direction: column; gap: 18px; }
.hab-main { min-width: 0; }
.hab-blokk-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 10px; }
.hab-blokk-h:first-child { margin-top: 0; }
.hab-h { font-size: .95rem; font-weight: 800; margin: 0; flex: 1 1 auto; min-width: 0; }

.hab-list, .hab-kovlist { display: flex; flex-direction: column; gap: 10px; }
.hab-card, .hab-kov { border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 9px; background: var(--card); padding: 10px 13px; }
.hab-card--dont, .hab-kov--nincs { border-left-color: var(--hot); }

/* ÚT A HABILITÁCIÓIG: számozott lépéssor. A szám a lépés azonossága (a felületen és a
   beszélgetésben is "a 4. lépés"), ezért kap saját, mindig látható jelölőt. A kész lépés
   halványul, de NEM tűnik el - a megtett út is információ. A szám a mobil egyoszlopos
   nézetben is a kártya BAL oldalán marad, mert a sorrend maga a mondanivaló. */
.hab-lepesek { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.hab-lep { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 9px; background: var(--card); padding: 10px 13px; }
.hab-lep--nincs { border-left-color: var(--hot); }
.hab-lep--kesz { opacity: .68; }
.hab-lepszam { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .8rem; font-weight: 800; margin-top: 1px; }
.hab-lep--nincs .hab-lepszam { background: var(--hot); }
.hab-lep-t { flex: 1 1 auto; min-width: 0; }
.hab-card-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.hab-ikon { display: inline-flex; flex: none; color: var(--brand); }
.hab-ikon svg { width: 17px; height: 17px; }
/* MIT KELL CSINÁLNI: a kártya legfontosabb sora, ezért kiemelt sávban ül a fejléc alatt */
.hab-teendo { display: flex; align-items: flex-start; gap: 7px; font-size: .84rem; font-weight: 600; color: var(--ink); background: var(--paper-2); border-radius: 7px; padding: 7px 10px; margin: 0 0 8px; }
.hab-teendo svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--hot); }
.hab-inline-ic { width: 13px; height: 13px; vertical-align: -2px; }
.hab-nev { font-weight: 700; font-size: .92rem; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.hab-edit { padding: 3px 8px; flex: none; }
.hab-edit svg { width: 14px; height: 14px; }

/* CHIP: alapból SEMLEGES szürke. Piros CSAK ott, ahol Áronnak dolga van vele (bot-javaslat
   döntésre vár, hiányzó követelmény). Az első verzió az --en barnát használta a javasoltra:
   az a rendszerben az ANGOL KÉPZÉS színe, nem szabad másra vinni. */
.hab-chip { font-size: .7rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); background: var(--paper-2); white-space: nowrap; }
.hab-chip--dont { border-color: color-mix(in srgb, var(--hot) 40%, transparent); color: var(--hot); background: color-mix(in srgb, var(--hot) 7%, transparent); font-weight: 700; }

.hab-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.hab-tag { font-size: .72rem; padding: 2px 7px; border-radius: 6px; background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line); overflow-wrap: anywhere; }
.hab-tag--hot { color: var(--hot); border-color: color-mix(in srgb, var(--hot) 35%, transparent); background: color-mix(in srgb, var(--hot) 8%, transparent); }

.hab-sor { display: flex; gap: 8px; font-size: .8rem; color: var(--ink-2); margin: 3px 0 0; overflow-wrap: anywhere; }
.hab-lbl { flex: none; width: 62px; font-size: .72rem; color: var(--muted); padding-top: 1px; }
.hab-kapcs { display: flex; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }
.hab-kapcs a { display: inline-flex; align-items: center; gap: 4px; }
.hab-kapcs svg { width: 13px; height: 13px; flex: none; }
.hab-note { font-size: .8rem; color: var(--ink-2); line-height: 1.5; margin: 7px 0 0; }
.hab-halvany { color: var(--ink-3); font-size: .76rem; }
.hab-card-f { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 7px; }
.hab-url { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; }
.hab-url svg { width: 13px; height: 13px; }
.hab-src { font-size: .72rem; color: var(--ink-3); overflow-wrap: anywhere; }

/* HABILITÁCIÓ HERO (Minerva-kör, 2026-08-25): cél-kártyák (habilitáció-előrehaladás,
   MTA-cél, közeli határidők) + a KÖVETKEZŐ lépés kiemelése. Egyedi osztálynevek - a
   globals.css "későbbi szabály nyer" csapdáját új szelektorokkal kerüljük el. */
.hab-hero { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
.hab-cel { display: flex; flex-direction: column; gap: 7px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); padding: 11px 13px; min-width: 0; }
.hab-cel-k { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-2); }
.hab-cel-k svg { width: 15px; height: 15px; color: var(--brand); flex: none; }
.hab-cel-t { font-size: .8rem; color: var(--ink-2); line-height: 1.45; }
.hab-prog { height: 6px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.hab-prog-sav { display: block; height: 100%; border-radius: 999px; background: var(--brand); transition: width .4s ease; }
.hab-next { display: inline-flex; align-items: flex-start; gap: 7px; text-align: left; font: inherit; font-size: .84rem; font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--hot) 7%, transparent); border: 1px solid color-mix(in srgb, var(--hot) 35%, transparent); border-radius: 8px; padding: 8px 11px; cursor: pointer; }
.hab-next svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--hot); }
.hab-next:hover { background: color-mix(in srgb, var(--hot) 12%, transparent); }
.hab-hatlista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: .8rem; color: var(--ink-2); }
.hab-hatlista li { display: flex; align-items: baseline; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.hab-hatlista .hab-tag { flex: none; }
.hab-lep--next { border-left-color: var(--hot); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hot) 25%, transparent); }
.hab-lep--next .hab-lepszam { background: var(--hot); }
@media (min-width: 900px) { .hab-hero { grid-template-columns: 1fr 1fr 1fr; } }

/* HABILITÁCIÓ: sáv-váltó fülek, levélsablon-blokk, témák és kapcsolatok (2026-08-25) */
.hab-savok { display: inline-flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.hab-savgomb { font: inherit; font-size: .78rem; font-weight: 700; color: var(--ink-2); background: transparent; border: 0; border-radius: 999px; padding: 4px 12px; cursor: pointer; white-space: nowrap; }
.hab-savgomb--aktiv { background: var(--card); color: var(--hot); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.hab-sablon { border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); padding: 8px 10px; margin: 8px 0; }
.hab-sablon-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.hab-sablon-h svg { width: 14px; height: 14px; color: var(--brand); flex: none; }
.hab-sablon-cim { font-size: .8rem; font-weight: 700; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.hab-sablon-to { font-size: .72rem; color: var(--ink-3); overflow-wrap: anywhere; }
.hab-sablon-d { margin-top: 6px; }
.hab-sablon-d summary { font-size: .76rem; color: var(--ink-2); cursor: pointer; }
.hab-sablon-p { font: inherit; font-size: .8rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px; margin: 6px 0 0; max-height: 320px; overflow-y: auto; }
.hab-temak-blokk, .hab-kapcsblokk { margin-bottom: 14px; }
.hab-temak { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.hab-tema { font-size: .8rem; color: var(--ink-2); }
.hab-tema summary { cursor: pointer; font-weight: 600; }
.hab-tema-l { margin: 4px 0 6px; font-size: .76rem; color: var(--ink-2); line-height: 1.45; }
.hab-tema--sima { font-weight: 600; }
.hab-kszemely { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); padding: 7px 10px; margin-bottom: 6px; min-width: 0; }
.hab-kszemely-n { font-size: .82rem; font-weight: 700; }
.hab-kszemely-sz { font-size: .72rem; color: var(--ink-3); }
.hab-kszemely-e { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: .76rem; }
.hab-kszemely-e a { display: inline-flex; align-items: center; gap: 4px; overflow-wrap: anywhere; }
.hab-kszemely-e svg { width: 12px; height: 12px; flex: none; }
.hab-kszemely-v { font-size: .74rem; color: var(--ink-2); line-height: 1.4; }
.hab-kszemely-sab { margin-top: 5px; align-self: flex-start; font-size: .74rem; }
.hab-kszemely-sab svg { width: 12px; height: 12px; }

/* HABILITÁCIÓ: belső itiner (pipálható al-lépések) + haladás-jelvény (2026-08-26) */
.hab-sum-resz { flex: none; font-size: .7rem; font-weight: 700; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.hab-reszek { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hab-resz label { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; line-height: 1.45; cursor: pointer; }
.hab-resz input { margin-top: 3px; flex: none; accent-color: var(--hot); }
.hab-resz--kesz span { color: var(--ink-3); text-decoration: line-through; }
.hab-hatterek { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; border: 1px dashed var(--line); border-radius: 9px; background: var(--paper-2); padding: 9px 12px; }
.hab-hatterek-c { font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); }
.hab-hatter { min-width: 0; }
.hab-hatter .hab-sum-cim { font-size: .84rem; }

/* HABILITÁCIÓ 2.1 (2026-08-25 este): kompakt, kinyitható kártyák - a 20+ lépés egy
   képernyőn pásztázható, a részlet kattintásra nyílik. A "következő" lépés nyitva indul. */
.hab-lep { display: block; }
.hab-osszecsuk { width: 100%; min-width: 0; }
.hab-sum { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; cursor: pointer; list-style: none; min-width: 0; }
.hab-sum::-webkit-details-marker { display: none; }
.hab-sum-cim { font-weight: 700; font-size: .88rem; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.hab-sum-jel { display: inline-flex; flex: none; color: var(--brand); }
.hab-sum-jel svg { width: 14px; height: 14px; }
.hab-sum .hab-tag { flex: none; }
.hab-sum .hab-chip { flex: none; }
.hab-nyil { width: 16px; height: 16px; color: var(--ink-3); flex: none; transition: transform .18s ease; }
details[open] > .hab-sum .hab-nyil { transform: rotate(180deg); }
.hab-sum:hover .hab-sum-cim { color: var(--hot); }
.hab-sum-body { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line); }
.hab-db { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); font-size: .7rem; font-weight: 700; vertical-align: 1px; margin-left: 4px; }
.hab-dontes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line); }
.hab-dontes .btn { padding: 4px 10px; font-size: .76rem; }
.hab-dontes svg { width: 13px; height: 13px; }

.hab-links { border: 1px solid var(--line); border-radius: 11px; background: var(--card); padding: 13px; }
.hab-links-h { display: flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 800; margin: 0 0 10px; }
.hab-links-h svg { width: 16px; height: 16px; flex: none; }
.hab-links-cs { margin-bottom: 12px; }
.hab-links-cim { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 5px; }
/* A link-soron a CÉL-OLDAL SAJÁT faviconja látszik (nem emoji, nem harmadik fél ikonja) -
   a betű-jelvény csak akkor, ha az oldalnak nincs betölthető faviconja. */
.hab-link { display: flex; align-items: flex-start; gap: 9px; padding: 6px 8px; border-radius: 7px; text-decoration: none; color: var(--ink); transition: background .15s; }
.hab-link:hover { background: var(--paper-2); color: var(--ink); }
.hab-fav { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 4px; object-fit: contain; }
.hab-fav--betu { display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); }
.hab-link-t { min-width: 0; }
.hab-link-cim { display: block; font-size: .82rem; font-weight: 600; overflow-wrap: anywhere; }
.hab-link-d { display: block; font-size: .72rem; color: var(--ink-3); line-height: 1.4; overflow-wrap: anywhere; }
.hab-links-lab { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--ink-3); margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.hab-links-lab svg { width: 14px; height: 14px; flex: none; }
.hab-f-check { flex-direction: row; align-items: center; gap: 8px; }
.hab-f-check input { width: auto; }

@media (min-width: 900px) {
  .hab-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
  .hab-links { position: sticky; top: 8px; }
}

/* ============ ÜZLETI PARTNEREK nézet (2026-08-10) ============
   Vizuális kártya-rács. MOBILE-FIRST: alapból egy oszlop, 900px felett 2, 1300 felett 3.
   Szürke az alap, PIROS csak a 'rám vár' csoportra és kártyáira. */
.prt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; }
.prt-bar-sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }
/* EXCEL-BEOLVASÁS ELŐNÉZETE (2026-08-12): a mentés előtt kiírjuk, mi változna */
.prt-import { border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--line)); border-left: 3px solid var(--brand); border-radius: var(--r-card); background: var(--card); padding: 13px 16px; margin: 0 0 18px; max-width: 1020px; box-shadow: var(--shadow-1); }
.prt-import-h { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.prt-import-sum { margin: 0 0 6px; font-size: .86rem; color: var(--ink-2); }
.prt-import-lista { margin: 0 0 4px; font-size: .8rem; color: var(--ink-2); overflow-wrap: anywhere; }
.prt-import-c { font-weight: 700; color: var(--ink); margin-right: 4px; }
.prt-import-hibak { margin: 8px 0 0; padding-left: 20px; font-size: .78rem; color: color-mix(in srgb, var(--yellow-deep) 78%, var(--ink)); }
.prt-import-hibak li { margin-bottom: 2px; }
.prt-import-foot { display: flex; justify-content: flex-end; margin-top: 11px; }

.prt-cs { margin-bottom: 22px; }
.prt-cs-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 9px; }
.prt-cs-cim { font-size: .95rem; font-weight: 800; margin: 0; }
.prt-cs-cim--hot { color: var(--hot); }
.prt-cs-mi { font-size: .76rem; color: var(--muted); }

.prt-racs { display: grid; grid-template-columns: 1fr; gap: 12px; }
.prt-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 10px; background: var(--card); padding: 12px 14px; min-width: 0; }
.prt-card--hot { border-left-color: var(--hot); }
.prt-card--halvany { opacity: .6; }

.prt-fej { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; }
.prt-fej-t { flex: 1 1 auto; min-width: 0; }
.prt-nev { display: block; font-weight: 800; font-size: .95rem; overflow-wrap: anywhere; }
.prt-jelvenyek { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.prt-jelveny { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.prt-jelveny svg { width: 12px; height: 12px; }
.prt-edit { flex: none; padding: 3px 8px; }
/* PUBLIKUS/PRIVÁT KAPCSOLÓ a kártya jobb felső sarkában (2026-08-12). Csak szem-ikon, felirat
   nélkül (user-kérés). Privát az alap: halvány, áthúzott szem. Publikus: zöld, nyitott szem -
   itt SZÁNDÉKOSAN nem piros, mert a piros az app-ban a "rám vár" jelentést viseli. */
.prt-pub { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-2); color: var(--muted); cursor: pointer; transition: color .14s, border-color .14s, background .14s; }
.prt-pub svg { width: 15px; height: 15px; }
.prt-pub:hover:not(:disabled) { border-color: var(--line-2); color: var(--ink-2); }
.prt-pub.is-pub { color: var(--g0); border-color: color-mix(in srgb, var(--g0) 45%, var(--line)); background: color-mix(in srgb, var(--g0) 12%, var(--card)); }
.prt-pub:disabled { cursor: default; opacity: .55; }
.prt-edit svg { width: 14px; height: 14px; }

.prt-teendo { display: flex; align-items: flex-start; gap: 7px; font-size: .84rem; font-weight: 600; color: var(--ink); background: var(--paper-2); border-radius: 7px; padding: 7px 10px; margin: 0 0 8px; }
.prt-teendo svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--hot); }
.prt-leiras { font-size: .82rem; color: var(--ink-2); line-height: 1.5; margin: 0 0 9px; }

.prt-kapcsok { display: flex; flex-direction: column; gap: 6px; margin-bottom: 9px; }
.prt-kapcs { font-size: .8rem; }
.prt-kapcs-nev { display: block; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.prt-kapcs-tit { font-weight: 400; color: var(--muted); font-size: .92em; }
.prt-kapcs-el { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
.prt-kapcs-el a { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; overflow-wrap: anywhere; }
.prt-kapcs-el svg { width: 13px; height: 13px; flex: none; }

.prt-megj { font-size: .78rem; color: var(--muted); line-height: 1.45; margin: 0 0 9px; }
.prt-lab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); font-size: .74rem; color: var(--muted); }
.prt-url { display: inline-flex; align-items: center; gap: 4px; }
.prt-url svg { width: 13px; height: 13px; }
.prt-kartya { padding: 2px 8px; font-size: .74rem; }
.prt-kartya svg { width: 13px; height: 13px; }
.prt-utolso, .prt-behozta { overflow-wrap: anywhere; }
.prt-dontes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line); }
.prt-dontes .btn { padding: 4px 10px; font-size: .76rem; }
.prt-dontes svg { width: 13px; height: 13px; }

/* a kapcsolattarto-sorok a szerkesztoben: mobilon egymas ala, szelesebben egy sorba */
.prt-kt-row { display: grid; grid-template-columns: 1fr; gap: 4px; margin-bottom: 6px; }
@media (min-width: 700px) { .prt-kt-row { grid-template-columns: 1.2fr 1fr 1.4fr 1fr auto; align-items: center; } }
@media (min-width: 900px) { .prt-racs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .prt-racs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ============ ONBOARDING nézet (2026-08-08) ============ */
.ob-intro { font-size: .88rem; color: var(--ink-2); line-height: 1.6; margin: 0 0 16px; }
.ob-intro code { background: var(--bg-2); padding: 1px 6px; border-radius: 5px; font-size: .85em; }
.ob-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ob-card { display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); padding: 16px; text-decoration: none; color: var(--ink); transition: border-color .15s; }
.ob-card:hover { border-color: var(--en); }
.ob-ic { font-size: 0; } .ob-ic svg { width: 26px; height: 26px; color: var(--en); }
.ob-t { font-weight: 800; font-size: 1rem; }
.ob-d { font-size: .82rem; color: var(--ink-2); line-height: 1.5; flex: 1; }
.ob-open { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--en); font-weight: 700; margin-top: 4px; }
.ob-open svg { width: 14px; height: 14px; }
.ob-regen { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.ob-hint { font-size: .78rem; color: var(--ink-3); margin: 8px 0 0; }
.ob-msg { font-size: .82rem; color: var(--ink-2); background: var(--bg-2); border-radius: 7px; padding: 8px 11px; margin: 8px 0 0; }
@media (max-width: 560px) { .ob-cards { grid-template-columns: 1fr; } }

/* ============ PROJEKTHÉT heti táblázat (2026-08-08) ============ */
.phv-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.phv-table { border-collapse: collapse; width: 100%; min-width: 720px; }
.phv-table th, .phv-table td { border: 1px solid var(--line); vertical-align: top; }
.phv-th-time { width: 76px; }
.phv-table thead th { background: var(--bg-2); padding: 7px 6px; font-size: .8rem; position: sticky; top: 0; z-index: 1; }
.phv-th-nap { display: block; font-weight: 800; }
.phv-th-datum { display: block; font-size: .72rem; color: var(--ink-3); font-weight: 400; }
.phv-td-time { width: 76px; background: var(--bg-2); padding: 6px; text-align: center; font-size: .72rem; color: var(--ink-2); white-space: nowrap; }
.phv-td-time b { display: block; font-size: .78rem; color: var(--ink); }
.phv-td-time span { display: block; font-variant-numeric: tabular-nums; }
.phv-td-time--none b { color: var(--en); }
/* overflow-wrap: egy hosszú, szóköz nélküli programcím se feszíthesse a min-width fölé a
   táblázatot (2026-08-10) - a vízszintes görgetősáv onnan is jöhetne, nem csak a 6 oszloptól */
.phv-td-cell { padding: 4px; min-width: 120px; overflow-wrap: anywhere; }
.phv-blk { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--g1); border-left: 3px solid var(--g1); border-radius: 6px; background: color-mix(in srgb, var(--g1) 7%, var(--card)); padding: 5px 7px; margin-bottom: 4px; }
.phv-blk:last-child { margin-bottom: 0; }
.phv-blk.is-kozos { border-color: var(--g0); border-left-color: var(--g0); background: color-mix(in srgb, var(--g0) 7%, var(--card)); }
.phv-blk.is-javasolt { border-style: dashed; }
.phv-blk.is-utkozes { border-color: var(--hot); border-left-color: var(--hot); background: color-mix(in srgb, var(--hot) 8%, var(--card)); }
.phv-blk[onclick], .phv-blk { cursor: default; }
.phv-td-cell .phv-blk { cursor: pointer; }
.phv-blk-t { font-weight: 700; font-size: .8rem; line-height: 1.25; }
.phv-blk-m { font-size: .72rem; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.phv-blk-o { font-size: .74rem; color: var(--ink); }
.phv-blk-c { font-size: .7rem; color: var(--ink-3); }
.phv-table-hint { font-size: .78rem; color: var(--ink-3); margin: 10px 0 0; }

/* ============ PROJEKTHÉT periódus-kapcsoló + belső blokk (2026-08-08) ============ */
.phv-period { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 4px 0 12px; }
.phv-period-grp { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.phv-pbtn { border: none; background: var(--card); color: var(--ink-2); padding: 6px 14px; font-size: .82rem; font-weight: 700; cursor: pointer; }
.phv-pbtn + .phv-pbtn { border-left: 1px solid var(--line); }
.phv-pbtn.is-on { background: var(--hot); color: #fff; }
.phv-datum { border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); padding: 5px 9px; font-size: .8rem; font-variant-numeric: tabular-nums; width: 210px; }
.phv-belso { border: 1px dashed var(--line); border-radius: 9px; margin-bottom: 12px; background: color-mix(in srgb, var(--en) 4%, transparent); }
.phv-belso-h { width: 100%; text-align: left; border: none; background: none; color: var(--ink); font-weight: 700; font-size: .84rem; padding: 9px 12px; cursor: pointer; }
.phv-belso-b { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.phv-belso-b textarea { border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); padding: 7px 9px; font-size: .84rem; font-family: inherit; resize: vertical; }
.phv-belso-hint { font-size: .74rem; color: var(--ink-3); margin: 0; }

/* Szervezési menetrend (2026-08-12): a Projekthét belső blokkjában szerkesztett, SORREND-
   BE kötött lépéslista, és UGYANEZ olvasásra a Segédletek nézetben - egy CSS, két helyen.
   A sorszám szürke (--brand), nem piros: a piros az appban csak aktív/kiemelt elemé. */
.phv-itiner { margin: 0 0 8px; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 7px; font-weight: 400; font-size: .84rem; color: var(--ink); }
.phv-itiner li { line-height: 1.45; }
.phv-itiner li::marker { color: var(--brand); font-weight: 700; }
.doc-menetrend { margin-bottom: 18px; }
.doc-menetrend-h { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); font-weight: 700; font-size: .86rem; color: var(--ink); }
.doc-menetrend-h::-webkit-details-marker { display: none; }
.doc-menetrend-h::after { content: '▾'; margin-left: auto; color: var(--ink-3); }
.doc-menetrend[open] .doc-menetrend-h::after { content: '▴'; }
.doc-menetrend-b { padding: 12px 14px; margin-top: 8px; }

/* SEGÉDLETEK fejléce (2026-08-12, user: „teljesen egybe van ez a mondat, nagyon ronda").
   A hivatkozás-kártya három SAJÁT sávra bomlik (ikon / szöveg / művelet), a szöveg pedig
   címre és magyarázatra. Mobilon a művelet alulra kerül, nem szorul ki a szöveg mellé. */
.docs-hiv { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 10px; background: var(--card); text-decoration: none; color: inherit; }
.docs-hiv-ic { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
.docs-hiv-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.docs-hiv-t strong { font-size: .95rem; }
.docs-hiv-t span { font-size: .78rem; color: var(--ink-2); line-height: 1.4; }
.docs-hiv-go { flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: var(--en); white-space: nowrap; }
@media (max-width: 560px) { .docs-hiv { flex-wrap: wrap; } .docs-hiv-go { width: 100%; text-align: right; } }

/* Témaszűrő chipek: nagy koppintó-felület, mobilon törnek, a szám halvány */
.docs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.docs-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font-size: .78rem; font-weight: 600; cursor: pointer; max-width: 100%; }
.docs-chip.is-on { border-color: var(--hot); color: var(--hot); font-weight: 700; }
.docs-chip-n { font-size: .7rem; color: var(--ink-3); font-weight: 400; }
.docs-chip.is-on .docs-chip-n { color: var(--hot); }
.docs-talalat { font-size: .76rem; color: var(--ink-3); margin: -6px 0 12px; }

/* Projekthét: meghívó oktató + halvány órasáv-gazda (2026-08-08) */
.phv-blk-h { font-size: .7rem; color: var(--en); font-style: italic; }
.phv-gazda { display: block; font-size: .66rem; color: var(--ink-3); opacity: .65; margin-top: 3px; padding-top: 3px; border-top: 1px dotted var(--line); font-style: italic; }
.phv-chip--h { border-color: var(--en); color: var(--en); background: transparent; font-style: italic; }
.phv-f-hint { font-weight: 400; font-size: .72rem; color: var(--ink-3); }

/* Projekthét szerkesztő: gyors sáv-választó gombok (2026-08-08) */
.phv-savgomb { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 4px; }
.phv-savgomb--blokk { margin-top: 6px; }
.phv-savgomb-cim { font-size: .72rem; color: var(--ink-3); font-weight: 700; margin-right: 2px; }
.phv-savbtn { border: 1px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 6px; padding: 4px 9px; font-size: .76rem; font-variant-numeric: tabular-nums; cursor: pointer; font-weight: 600; }
.phv-savbtn:hover { border-color: var(--en); }
.phv-savbtn.is-on { background: var(--hot); color: #fff; border-color: var(--hot); }
.phv-savbtn--clr { color: var(--ink-3); font-style: italic; }

/* PÁRHUZAMOS PROGRAMOK EGY CELLÁBAN (2026-08-24, user-kérés: "egy időben három helyen 3
   teremben lehetünk … vertikálisan egymás mellett a cellában két stb oszlopban mutatjuk").
   Egyetlen programnál a wrapper display:contents - minden marad a régiben (a .phv-cellbelso
   flex-oszlopa nyújtja a blokkot). Többnél rács: max 3 oszlop (--par-db), 4+ tag sortöréssel.
   A minmax(0,1fr) kötelező: nélküle a hosszú cím szétnyomná az oszlopot (flex/grid min-size). */
.phv-cellpar { display: contents; }
.phv-cellpar.is-tobb {
  display: grid; grid-template-columns: repeat(var(--par-db, 2), minmax(0, 1fr));
  gap: 4px; align-items: stretch; flex: 1;
}
.phv-cellpar.is-tobb .phv-blk { min-width: 0; margin: 0; }
/* terem-szabály figyelmeztetés a heti tábla blokkján (teremGond: Nagyelőadó csak hétfőn) */
.phv-blk-tg { display: block; font-size: .6rem; font-weight: 700; color: #fff; opacity: .95; margin-top: 2px; }
/* kapacitás-jelzés a napi listán: figyelmeztetés, nem hiba - ezért borostyán (--en), nem piros */
.phv-kap { display: flex; gap: 5px; align-items: center; font-size: .72rem; font-weight: 700; color: var(--en); margin: 4px 0 0; }
.phv-kap svg { width: 13px; height: 13px; flex: none; }

/* PÁRHUZAMOSOK A NAPI LISTÁN (mobilon ez az egyetlen nézet - a heti tábla ≤900px-en nincs
   kint). Két oszlop 390px-en is elfér (mérve); a címke kimondja, amit az elrendezés sugall. */
.phv-par {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px; margin: 0 0 10px; padding: 6px; border: 1px dashed var(--line); border-radius: 10px;
}
.phv-par-cim { grid-column: 1 / -1; font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.phv-par .phv-item { min-width: 0; margin: 0; }

/* SZABAD SÁV a heti táblázat üres cellájában (2026-08-24, user-kérés: "jelölni kéne, hogy
   szabad sáv zölden … és azt hogy kiknek lehetne most ezt odaadni"). A zöld a MEGLÉVŐ --g0
   jelölőszín (a link-blokkok is ezt használják), tehát sötét témán is van párja - nem írunk
   be nyers hex-et. A --hot PIROS szándékosan nem jöhet szóba: az ebben az appban az aktív,
   "rám vár" jelentést viseli, egy szabad sáv pedig épp az ellenkezője.
   A blokk halvány zöld alapon, bal oldali zöld sínnel ül, hogy a rácsban RÁNÉZÉSRE
   megkülönböztethető legyen a programot tartalmazó cellától - a szín mellett a "szabad sáv"
   felirat is ott van, mert színvakon és nyomtatásban a szín önmagában nem információ. */
.phv-szabad {
  display: block; margin-top: 3px; padding: 4px 6px 5px;
  border-left: 3px solid var(--g0); border-radius: 0 6px 6px 0;
  /* 2026-08-24 user: „a zöld felirat jó, de a háttér lehetne halványabb" - a --g0-100 token
     helyett 6%-os keverés a kártya-alappal (témakövető, és tényleg csak leheletnyi) */
  background: color-mix(in srgb, var(--g0) 6%, var(--card));
}
.phv-szabad-cim {
  display: block; font-size: .6rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--g0); margin-bottom: 1px;
}
/* a gazda-sor a zöld dobozon BELÜL már nem kap saját elválasztó vonalat és halványítást:
   a doboz maga tagol, a dupla jelölés csak olvashatatlanná tenné */
.phv-szabad .phv-gazda { border-top: none; padding-top: 0; margin-top: 0; opacity: .8; }
.phv-szabad-sor { display: block; font-size: .66rem; color: var(--ink-2); margin-top: 1px; }
.phv-szabad-k { font-weight: 700; color: var(--ink-3); }
.phv-szabad-sor .is-hl { color: var(--hot); font-weight: 700; }
/* aki AZNAP amúgy is bent van: kiemelt jelölt egy szabad sávra (nem piros - az az aktív elemé) */
.phv-szabad-itt { font-weight: 700; color: var(--ink); }
@media (max-width: 720px) {
  /* MOBIL: a cella keskeny, a hover-tooltip pedig nem létezik - a betűméret marad olvasható,
     a doboz belső tere szűkül. A sorok törhetnek, vízszintes túlcsordulás nem lehet. */
  .phv-szabad { padding: 4px 4px 5px; }
  .phv-szabad-sor { font-size: .64rem; word-break: break-word; }
}

/* Projekthét halvány órasáv-gazda: "eredetileg: Név (szint · csoport · óra neve)" */
.phv-gazda-cim { font-weight: 700; font-style: normal; }
.phv-gazda-t { font-size: .68rem; }
.phv-gazda-x { font-size: .62rem; opacity: .85; }

/* Projekthét oktató-szűrő (2026-08-08): kiemelés egy oktatóra */
.phv-oszuro { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 0 0 12px; }
.phv-oszuro-cim { font-size: .76rem; font-weight: 700; color: var(--ink-3); margin-right: 2px; }
.phv-ochip { border: 1px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 999px; padding: 4px 11px; font-size: .78rem; cursor: pointer; }
.phv-ochip.is-on { background: var(--hot); color: #fff; border-color: var(--hot); font-weight: 700; }
.phv-blk.is-hl { outline: 2px solid var(--hot); outline-offset: 1px; }
.phv-blk.is-dim { opacity: .32; }
.phv-item.is-hl { outline: 2px solid var(--hot); outline-offset: 1px; }
.phv-item.is-dim { opacity: .38; }
.phv-gazda-t.is-hl { color: var(--hot); font-weight: 700; opacity: 1; }

/* Projekthét oktató-szűrő: meghívott előadók külön csoport (2026-08-08) */
.phv-oszuro-cim--v { margin-left: 10px; color: var(--en); }
.phv-ochip--v { border-color: var(--en); font-style: italic; }
.phv-ochip--v.is-on { background: var(--en); color: #fff; border-color: var(--en); font-style: normal; }

/* Projekthét: több sávot átfogó program egybefüggő jelölése (2026-08-08) */
.phv-td-cell { position: relative; }
.phv-blk.is-nyilt-lent { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; margin-bottom: 0; }
.phv-blk.is-nyilt-fent { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; margin-top: 0; }
.phv-blk.is-folyt { opacity: .9; }
.phv-blk.is-folyt .phv-blk-t { font-style: italic; font-weight: 600; opacity: .75; }
.phv-blk-folyt { font-size: .64rem; color: var(--ink-3); font-style: italic; }
/* a köztes cella-hézag eltüntetése az áthidaló jelölésnél: a folytatás-doboz a cella tetejéig ér */
.phv-td-cell { vertical-align: top; }

/* Projekthét: összetartozó órák szaggatott összekötése (2026-08-08) */
.phv-tablewrap { position: relative; }
.phv-svg { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 3; }
.phv-blk[data-link] { position: relative; z-index: 4; }

/* Projekthét évfolyam-szűrő (2026-08-08) */
.phv-ochip--e { border-color: var(--g1); }
.phv-ochip--e.is-on { background: var(--g1); color: #fff; border-color: var(--g1); font-weight: 700; }
.phv-oszuro-terh { font-size: .76rem; font-weight: 700; color: var(--g1); margin-left: 4px; }

/* REJTETT TOVÁBBÍTÁS nyugtája (2026-08-08): a feladó rövid visszajelzése, ha senki nem
   kerül CC-be. Halvány keret + saját szövegmező, hogy elváljon a továbbított levéltől. */
.po-fwd-ack { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--paper); }
.po-fwd-ack-h { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 800; color: var(--ink-2); }
.po-fwd-ack-h svg { width: 15px; height: 15px; }
.po-fwd-ack-modok { display: flex; gap: 8px; flex-wrap: wrap; }
.po-fwd-ack-ta { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 120px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font: inherit; font-size: .92rem; line-height: 1.5; background: var(--card); color: inherit; }
.po-fwd-ack-ta:focus { outline: none; border-color: var(--ink); }
/* melyik lapozó-paklin vagyunk (aktuális / későbbiek / kész) - halványan a szám mellé */
.dr-nav-scope { color: var(--muted); font-weight: 600; }
/* a Kimeno blokk sajat uzenet-sora (a Masolhato blokk pushMsg-je ide nem latszott el) */
.po-pushmsg--out { display: block; margin: 4px 0 8px; }

/* Video-platform cimkek (2026-08-08): a belepo-link PLATFORMJA ranezesre lasson -
   Teams lila, Zoom kek, Meet zold arnyalat. Nem marka-logo, hanem szin+nev. */
.vidchip { font-weight: 700; }
.vidchip--teams { color: #6264a7 !important; }
.vidchip--zoom { color: #2d8cff !important; }
.vidchip--meet { color: #1a8a5f !important; }
html[data-theme='dark'] .vidchip--teams { color: #9a9cd9 !important; }
html[data-theme='dark'] .vidchip--zoom { color: #6fb1ff !important; }
html[data-theme='dark'] .vidchip--meet { color: #57c397 !important; }
/* kulso naptar-meghivo jelzese az esemeny-kartyan */
.ext-oltag { color: var(--muted); font-size: .78rem; }
/* gyorslink szolgaltatas-favicon (a dl-ic emoji helyen) */
.dl-favicon { width: 17px; height: 17px; border-radius: 4px; vertical-align: -3px; }
/* tobb-szereplos szal: a nyitott kerdezok sora a Posta-soron (t22-tanulsag) */
/* TOVÁBBÍTÁS-VÁLASZ MEGÉRKEZETT: zöld folytatás-sáv - innentől mehet a válasz az eredeti feladónak */
/* KI VÁR VÁLASZRA - személyenként a Posta-soron (2026-08-10, a 17-címzettes szál tanulsága).
   Csukott soron is látszik: egy nagy szálban külön-külön válaszolnak, és mindenkit külön
   kell látni és megválaszolni. Mobil-első: a csipek törnek, a gombok ujjbegy-méretűek. */
/* Helyben nyíló per-személy válasz-panel (2026-08-11) */
@media (max-width: 720px) { .po-vpanel-gombok .btn { min-height: 42px; padding: 8px 12px; } }
/* Titkárnő: kinek válaszolunk (személy-fókusz) */
.po-wiz-kinek { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; padding: 8px 12px; background: var(--hot-100); border-left: 3px solid var(--hot); border-radius: 8px; }
/* MOBILON EGY FOLYÓ SOR, NEM HASÁBOK (2026-08-14, mérve 390px-en): az `inline-flex` miatt a
   név, a dátum és a megjegyzés KÜLÖN flex-elem volt, ezért keskeny kijelzőn három szűk
   hasábba tördelődött („Szirtes / Nikolett / (METU / MD)"). Sima szövegfolyamban a sor
   természetesen törik, és a teljes szélességet használja. */
.po-wiz-kinek-h { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .92rem; font-weight: 800; color: var(--ink); line-height: 1.4; }
.po-wiz-kinek-h svg { width: 17px; height: 17px; color: var(--hot); flex: none; }
/* AZ IDŐPONT A LEGFONTOSABB ADAT: ez különbözteti meg egy ember leveleit (2026-08-14) */
.po-wiz-kinek-ido { padding: 3px 12px; font-size: .92rem; font-weight: 800; color: #fff;
  background: var(--hot); border-radius: 999px; white-space: nowrap; }
.po-wiz-kinek-nev { flex: 1 1 100%; font-size: .84rem; font-weight: 700; color: var(--ink); }
.po-wiz-kinek-n { font-weight: 600; color: var(--ink-2); }
/* KINEK VÁLASZOLSZ - választó csipek (2026-09-03): a szál többi résztvevője egy koppintással a cél */
.po-wiz-kinek-valt { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 6px; }
.po-kinek-chip { min-height: 32px; padding: 4px 10px; font-size: .8rem; font-weight: 700; font-family: var(--ff); color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.po-kinek-chip:hover { border-color: var(--hot); color: var(--hot); }
/* HALADÁS-SÁV az átadott levelekről: hányadiknál tartasz, mi van kész, mi jön még */
.po-atadsav { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 2px; }
.po-atadchip { padding: 4px 12px; font-size: .76rem; font-weight: 700; color: var(--ink-2);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.po-atadchip.is-most { color: #fff; background: var(--hot); border-color: var(--hot); }
.po-atadchip.is-kesz { color: var(--g0); border-color: var(--g0); background: transparent; }
@media (max-width: 560px) { .po-wiz-kinek-h { font-size: .92rem; } }
.po-wiz-kinek-g { flex: 1 1 100%; font-size: .84rem; color: var(--ink-2); line-height: 1.45; }
.po-fwdback { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 4px; padding: 8px 12px; font-size: .84rem; font-weight: 700; color: #0e6b45; background: color-mix(in srgb, #17935f 13%, var(--card)); border-left: 3px solid #17935f; border-radius: 8px; }
html[data-theme='dark'] .po-fwdback { color: #6fd6a8; background: color-mix(in srgb, #17935f 12%, var(--card)); }
/* 2026-08-19: a FIGYELMEZTETŐ (🔁 továbbítás-mód) változat borostyán, nem zöld - a zöld
   sáv azt jelenti, "megjött a válasz, mehetsz tovább", a 🔁 pedig azt, "vigyázz, így a
   küldés nem a feladónak szól". Az alap .po-fwdback UTÁN áll: azonos specificitáson a
   későbbi nyer. Az osztályt a JSX teszi rá, ez itt csak a szabály. */
.po-fwdback--mode { color: #7a5c10; background: color-mix(in srgb, var(--yellow-deep) 24%, var(--card)); border-left-color: var(--yellow-deep); }
html[data-theme='dark'] .po-fwdback--mode { color: #e9c95a; background: color-mix(in srgb, var(--yellow-deep) 13%, var(--card)); }
/* CÍMZETT-ŐR sávja (2026-09-06): piros, mert itt a felhasználó lép (FIGYELEM-család, --hot);
   a .po-fwdback--mode UTÁN áll, azonos specificitáson a későbbi nyer */
.po-fwdback--or { color: var(--hot); background: color-mix(in srgb, var(--hot) 12%, var(--card)); border-left-color: var(--hot); }
html[data-theme='dark'] .po-fwdback--or { color: #ff8a80; background: color-mix(in srgb, var(--hot) 14%, var(--card)); }
/* a harmadik-fél jelvény: kire várunk, és kiért - TELE narancs chip, hogy ránézésre
   külön kategóriának látsszon (2026-08-09 user-kérés: "tegyük egyértelműbb jelöléssé");
   hosszú szöveg, hadd törjön */
/* MOBILE-FIRST: a .po-badge alapból flex:none + nowrap - ez a hosszú (két nevet hordozó)
   chip azzal kilógott a képernyőről. Itt zsugorodhat a sor szélességéig, és a szöveg
   sorokba törik; a lekerekítés kisebb, hogy többsorosan is jól nézzen ki. */
.po-badge--fwd { white-space: normal; flex: 0 1 auto; max-width: 100%; min-width: 0; text-align: left; line-height: 1.4; border-radius: 8px; background: var(--fwd); color: #fff; font-weight: 800; }
.po-badge--fwd svg { stroke: #fff; }
/* ELŐKÉSZÍTETT (még el nem küldött) továbbítás: halvány, körvonalas - a teendő NÁLUNK van */
.po-badge--fwdprep { white-space: normal; flex: 0 1 auto; max-width: 100%; min-width: 0; text-align: left; line-height: 1.4; border-radius: 8px; background: transparent; color: var(--fwd); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fwd) 45%, transparent); font-weight: 700; }
/* 2026-08-10 (user: "768 szélességnél rettenetesen néz ki"): a .po-main csak 720px ALATT
   tördelt, ezért 720-900 között ez a hosszú mondat egy keskeny, magas oszloppá préselődött
   a fejléc-sorban. Ebben a sávban is tördelünk, és a jelvény ÖNÁLLÓ, jól olvasható sávot kap. */
@media (max-width: 900px) {
  .po-main { flex-wrap: wrap; row-gap: 4px; }
  .po-main .s { flex-basis: 100%; order: 5; white-space: normal; overflow: visible; }
  .po-badge--fwd, .po-badge--fwdprep { flex: 1 0 100%; order: 6; font-size: .92rem; font-weight: 800; line-height: 1.45; padding: 12px 12px; border-radius: 10px; }
  .po-badge--fwd svg, .po-badge--fwdprep svg { width: 18px !important; height: 18px !important; vertical-align: -4px; margin-right: 4px; }
}
html[data-theme='dark'] .po-badge--fwdprep { color: var(--fwd); }

/* A 2026-08-08-i Posta-oldali chat-buborek-blokk 2026-08-19-en TOROLVE: fogyasztoja mar
   nem volt, a szal-nezetet a SzalIdovonal .szt-lista/.szt-sor szabalyai adjak. */

/* BEERKEZETT-FOLYAM (2026-08-08): minden bejovo uzenet idorendben a Posta tetejen -
   a tobb-szereplos szalak uzenetei sem tunhetnek el tobbe (Szentes-eset). */
.po-feed { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 8px 12px; margin-bottom: 12px; }
.po-feed-h { display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; font-size: .92rem; font-weight: 800; color: var(--ink); cursor: pointer; padding: 4px 2px; }
.po-feed-new { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--hot); color: #fff; font-size: .76rem; font-weight: 800; }
/* FELDOLGOZATLAN nyers levél (2026-08-10): a postafiókban OTT VAN, az appban SEMMI nyoma -
   ez a legpirosabb sor a Postán, a "minden levél látható" törvény bot-független rétege */
.po-feed-miss { margin-left: 8px; font-size: .72rem; font-weight: 800; color: #fff; background: var(--hot); border-radius: 999px; padding: 2px 12px; animation: poMissLuktet 1.4s ease-in-out infinite; }
@keyframes poMissLuktet { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
.po-feed-row.is-hianyzik { border: 1.5px solid var(--hot); background: var(--hot-100); border-radius: 8px; }
.po-feed-row.is-hianyzik .fg b { color: var(--hot); }
@media (prefers-reduced-motion: reduce) { .po-feed-miss { animation: none; } }

/* ============ SZÁL-IDŐVONAL (SzalIdovonal, 2026-08-19 este: VISSZA A FÜGGŐLEGESRE) ======
   A levélszál nap-csipes, gerinc-vonalas függőleges idővonalként áll (a 2026-08-10-i,
   bevált szerkezet), user-döntés: "jobb volt a vertikális timeline, jobban nézett ki,
   érthetőbb volt". A napközbeni buborék-osztályok fogyasztó nélkül maradtak, ezért törölve.
   A HOL TARTUNK sáv és a kimenő címzett-sor (.szt-cimzett) az újakból MEGMARADT. */
.szt { margin: 8px 0 4px; }
/* HOL TARTUNK: két sor - (1) az utolsó ÉRDEMI levél, (2) a következő lépés + a résztvevők */
.szt-fej { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; margin: 0 0 8px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; }
.szt-fej-sor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; min-width: 0; }
.szt-fej-cim { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.szt-szemely { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 600; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; max-width: 100%; }
.szt-szemely b { font-weight: 800; font-size: .68rem; color: var(--ink-2); }
.szt-szemely--var { border-color: color-mix(in srgb, var(--hot) 45%, transparent); background: var(--hot-100); }
.szt-szemely--var b { color: var(--hot); }
/* a lefedett résztvevő halványan: információ, de nem teendő */
.szt-szemely--ok { opacity: .62; }
.szt-pont { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.szt-utolso { font-size: .72rem; color: var(--muted); overflow-wrap: anywhere; }
.szt-lepes-c { font-size: .72rem; font-weight: 700; color: var(--ink-2); }
/* alapból semleges - a PIROS csak akkor jár, ha a labda NÁLUNK van (szín-szabály) */
.szt-lepes { font-size: .84rem; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.szt-lepes--te { color: var(--hot); }

/* IDŐVONAL: bal oszlopban nap-csip, mellette a gerincen ülő pötty, jobbra a szöveg.
   2026-08-10 (user: "a szt-dot mintha takarásban lenne és nem a vertikális vonal közepén"):
   a gerinc fix 56px-en állt, a pötty középvonala viszont 44+10+5,5 = 59,5px-re esett, tehát
   3,5px-szel mellétrafált. MINDHÁROM méret egy változóból jön, így nem tud elcsúszni. */
.szt-lista { list-style: none; margin: 0; padding: 0; position: relative; --szt-nap: 44px; --szt-koz: 10px; --szt-dot: 13px; }
.szt-lista::before { content: ''; position: absolute; left: calc(var(--szt-nap) + var(--szt-koz) + var(--szt-dot) / 2); top: 4px; bottom: 4px; width: 2px; background: var(--tl2-halvany, #E5EDF4); transform: translateX(-1px); }
html[data-theme='dark'] .szt-lista::before { background: color-mix(in srgb, #8ea8c3 34%, transparent); }
.szt-sor { display: flex; align-items: flex-start; gap: var(--szt-koz); margin: 0 0 8px; }
.szt-sor:last-child { margin-bottom: 0; }
.szt-nap { flex: none; width: var(--szt-nap); text-align: center; background: #013A72; color: #fff; border-radius: 8px; font-size: .68rem; font-weight: 800; letter-spacing: .02em; padding: 3px 2px; }
html[data-theme='dark'] .szt-nap { background: #2f5f96; }
/* 2026-08-10: a fenti dark-szabaly (nagyobb specificitas) felulirta a .szt-nap--ures
   atlatszosagat, ezert MINDEN soron ott ult egy navy csik nap-felirat nelkul - ettol tunt
   ugy, mintha a pottyok takarasban lennenek. Az ures hely mindket temaban atlatszo. */
html[data-theme='dark'] .szt-nap--ures { background: transparent; }
.szt-nap--ures { background: transparent; }
.szt-dot { flex: none; position: relative; z-index: 1; width: var(--szt-dot); height: var(--szt-dot); border-radius: 50%; margin-top: 3px; box-shadow: 0 0 0 3px var(--card); }
/* a saját (kimenő) üzenet pöttye piros ÉS szögletes - szín nélkül is elválik */
.szt-sor--ki .szt-dot { border-radius: 3px; }
.szt-test { min-width: 0; flex: 1; }
.szt-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.szt-nev { font-size: .84rem; font-weight: 800; }
.szt-sor--ki .szt-nev { color: var(--hot); }
.szt-ora { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.szt-tag { font-style: normal; font-size: .68rem; font-weight: 700; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }
/* a kimenő sor címzett-sora: "→ Név, Név +2 · CC 3 · BCC 1" (a BCC csak darabszám).
   A meta-soron BELÜL ül, de saját sorba törik (flex-basis 100%) - ez lépett a régi,
   egy címzettes "↳ válasz neki: Név" chip (.szt-neki) helyére. */
.szt-cimzett { flex: 1 0 100%; min-width: 0; font-size: .72rem; font-weight: 700; color: var(--ink-2); overflow-wrap: anywhere; }
/* 2026-08-20: a sor KOPPINTHATÓ kapcsoló (a Boríték összegzőjével azonos gyógyítás) - a
   névsor eddig csak a tooltipben élt. A gomb betűre a régi szöveget viseli + egy ▸/▾ jelet,
   keret és háttér nélkül: az idővonal ritmusát nem törheti meg egy doboz. */
.szt-cimzett-b { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 40px; padding: 4px 0; font: inherit; font-size: .72rem; font-weight: 700; text-align: left; color: inherit; background: none; border: 0; cursor: pointer; overflow-wrap: anywhere; }
.szt-cimzett-t { min-width: 0; overflow-wrap: anywhere; }
.szt-cimzett-j { flex: none; color: var(--muted); }
.szt-cimzett-b:hover .szt-cimzett-j, .szt-cimzett-b.is-on .szt-cimzett-j { color: var(--hot); }
/* a kinyitott névsor: szerepenként egy sor, a közös szekciócím-mintán. A REJTETT kör
   SOSEM kap nevet - csak darabszámot -, és halkan (ink-2 + szaggatott vonal) jelenik meg. */
.szt-cimzett-r { display: flex; flex-direction: column; gap: 8px; padding: 0 0 4px; }
.szt-crsor { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.szt-crcim { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.szt-crnev { font-size: .76rem; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.szt-crsor--rejtett .szt-crnev { color: var(--ink-2); border-bottom: 1px dashed var(--line-2); align-self: flex-start; max-width: 100%; }
.szt-gist { font-size: .84rem; color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }
/* a kimenő kivonat halvány piros tónust kap - NEM buborék, csak megkülönböztetés */
.szt-sor--ki .szt-gist { color: var(--ink); background: color-mix(in srgb, var(--hot) 6%, transparent); border-radius: 8px; padding: 4px 8px; margin-top: 2px; }
.szt-velemeny { margin-top: 4px; font-size: .76rem; color: var(--muted); }
.szt-velemeny--kell { color: var(--hot); font-weight: 700; }
.szt-velemeny em { font-style: normal; opacity: .75; }
.szt-atad { margin-top: 4px; margin-right: 8px; padding: 8px 12px; min-height: 34px; font: inherit; font-size: .76rem; font-weight: 800; color: #fff; background: var(--hot); border: 0; border-radius: 999px; cursor: pointer; }
.szt-atad.is-on { background: var(--g0); }
@media (max-width: 720px) { .szt-atad { min-height: 40px; font-size: .84rem; } }
/* Titkárnő-indító sor a szál alatt (2026-08-14): a gomb mellett a „már válaszoltál neki"
   figyelmeztetés. MOBILE-FIRST: 390px-en egymás alá törik, a gomb teljes szélességű. */
/* Rövid magyarázat egy gomb HELYÉN (2026-08-14): ahol a művelet ebben a helyzetben úgysem
   működne, nem tiltott gomb áll, hanem az ok - a néma tiltás tilos. */
.po-note-mini { align-self: center; max-width: 34ch; font-size: .76rem; line-height: 1.4; color: var(--ink-2); }
/* Titkárnő 1/3: az ÁTADOTT levél szövege az összefoglaló helyén (2026-08-14) */
.po-wiz-egylevel { margin: 8px 0 2px; }
.po-wiz-egylevel-h { display: block; margin: 0 0 4px; font-size: .76rem; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink-2); }
.po-atad-sor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.po-atad-jel { font-size: .76rem; color: var(--ink-2); }
@media (max-width: 560px) { .po-atad-sor > .btn { width: 100%; justify-content: center; } }
.szt-torzs-b { margin-top: 4px; padding: 8px 12px; min-height: 34px; font: inherit; font-size: .76rem; font-weight: 700; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.szt-torzs-b:hover { border-color: var(--hot); color: var(--hot); }
.szt-torzs { margin: 8px 0 0; padding: 12px 12px; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .84rem; line-height: 1.5; color: var(--ink); background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 720px) { .szt-torzs-b { min-height: 40px; font-size: .84rem; } }
/* automata válasz (out-of-office): látszik, de halványan - nem teendő */
.szt-sor--auto { opacity: .55; }
.szt--kompakt .szt-fej { padding: 8px 8px; }
.szt--kompakt .szt-gist { font-size: .84rem; }
/* a soron belüli hosszú tartalom (teljes levél, gombok) sem feszítheti szét a szálat */
.szt-test > * { max-width: 100%; }
.po-feed-hint { margin: 2px 0 8px; font-size: .76rem; color: var(--muted); }
.po-feed-row { display: flex; gap: 8px; align-items: baseline; padding: 4px 8px; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); font-size: .84rem; line-height: 1.4; flex-wrap: wrap; }
.po-feed-row.is-new { background: color-mix(in srgb, var(--hot) 7%, transparent); border-left: 3px solid var(--hot); border-radius: 4px; }
.po-feed-row .fd { flex: none; font-size: .72rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
/* MOBILE-FIRST (2026-08-09): a hosszú feladó-név („Adatvédelmi Tisztviselő (Szalai Vanda,
   Fritz-Nagy Márta)") flex:none-nal kifeszítette a sort, és az EGÉSZ oldal vízszintesen
   elcsúszott. Zsugorodhat és tördel. */
.po-feed-row .fn { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 800; }
.po-feed-row .fo { flex: none; }
.po-feed-row .fg { flex: 1 1 260px; min-width: 0; color: var(--ink-2); }
.po-feed-row .btn { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; padding: 3px 8px; }
.po-feed, .po-feed-row { max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
.po-feed-foot { padding: 8px 2px 4px; }
@media (max-width: 720px) { .po-feed-row .fg { flex-basis: 100%; order: 5; } }
.po-feed-szuro { display: flex; gap: 8px; margin: 0 0 8px; }
.po-feed-row.is-atfutott { opacity: .62; }

/* ── CÉGEK nézet (2026-08-12) ──────────────────────────────────────────────
   Piaci merítés (204 kreatív ipari cég, TÉRKÉPPEL) + NMHH-nyilvántartás (433
   médiaszolgáltató, lista). A térkép saját rajzú SVG, ezért a téma tokenjeit
   viseli: szürke (--brand) az alap, PIROS (--hot) csak a kiválasztott elem.
   Mobil: a buborékok a kis léptéken alig koppinthatók, ezért a település-CSIPEK
   a valódi vezérlő (l. CegekTerkep.tsx fejlécében). */
/* a nezet-fejlec tordeleset mar a kozos .cat-block-head szabaly intezi */
.cg-fulek { margin-left: auto; flex: none; }
.cg-sp { flex: 1; }
.cg .btn.cg-edit { flex: none; padding: 3px 8px; }
.cg .btn.cg-edit svg { width: 14px; height: 14px; }
.cg .btn.cg-ment { background: var(--hot); border-color: var(--hot); color: #fff; }

/* TÉRKÉP */
.cg-terkep { margin: 0 0 14px; }
/* KET TERKEP EGYMAS MELLETT (2026-08-16): orszagos + budapesti kerulet-terkep. A meretet
   a LAP korlatozza (max-width), nem az SVG - kulonben a ket vaszon kulon-kulon 480px-re
   nott volna, es a rács mellett is szet estek volna. Mobilon (<=720px) egymas ala kerul.
   Elozmeny: a terkep 2026-08-12 ota SZANDEKOSAN kicsi (user: "lehet kisebb"), a felirat-
   es szammeretek viewBox-egysegben ezert NAGYOBBAK, hogy a kis leptek mellett is
   olvashatoak maradjanak. */
/* Az oszlopok aranya NEM 1:1: az orszagos vaszon 1000x615 (fekvo), a budapesti 1000x952
   (majdnem negyzet). Egyenlo szelessegnel a jobb oldali 1,5-szer magasabb lenne; az
   1,55:1 arany a KET RAJZ MAGASSAGAT teszi egyenlove (615/952 forditottja). */
.cg-terkepek { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; align-items: start; max-width: 1000px; margin: 0 auto; }
.cg-terkeplap { margin: 0; min-width: 0; }
.cg-terkepcim { margin: 0 0 4px; text-align: center; font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.cg-terkep-svg { display: block; width: 100%; height: auto; margin: 0 auto; }
@media (max-width: 720px) { .cg-terkepek { grid-template-columns: 1fr; max-width: 480px; } }
/* A megye kattinthato szuro-celpont (2026-08-16): a legnagyobb, legkonnyebben eltalalhato
   elem a terkepen, mobilon is. A buborekok EFOLOTT vannak, tehat a varos nyer felette. */
.cg-megye { fill: color-mix(in srgb, var(--brand) 9%, var(--card)); stroke: var(--line-2); stroke-width: 1.4; stroke-linejoin: round; cursor: pointer; transition: fill .14s; }
.cg-megye.is-fokusz { fill: color-mix(in srgb, var(--brand) 22%, var(--card)); }
.cg-megye.is-on { fill: color-mix(in srgb, var(--hot) 22%, var(--card)); stroke: var(--hot); }
.cg-bub { cursor: pointer; }
.cg-bub-kopp { fill: transparent; }
.cg-bub-kor { fill: color-mix(in srgb, var(--brand) 62%, transparent); stroke: var(--card); stroke-width: 2; transition: fill .14s; }
.cg-bub:hover .cg-bub-kor { fill: color-mix(in srgb, var(--brand) 85%, transparent); }
.cg-bub.is-on .cg-bub-kor { fill: var(--hot); }
.cg-bub-szam { fill: #fff; font-family: var(--ff); font-size: 30px; font-weight: 800; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.cg-cimke { fill: var(--ink-2); font-family: var(--ff); font-size: 27px; font-weight: 700; pointer-events: none; paint-order: stroke; stroke: var(--card); stroke-width: 5px; stroke-linejoin: round; }
/* a felirat alapbol a potty ALATT all; ha egy nagyobb buborek kozel van (agglomeracio),
   oldalra kerul, hogy ne logjon bele - l. CegekTerkep.tsx CIMKE-UTKOZES */
.cg-cimke--kozep { text-anchor: middle; }
.cg-cimke--bal { text-anchor: end; }
.cg-cimke--jobb { text-anchor: start; }
.cg-cimke.is-on { fill: var(--hot); }
.cg-terkep-lab { margin: 6px auto 0; max-width: 640px; text-align: center; font-size: .78rem; line-height: 1.5; color: var(--ink-2); }

/* BUDAPESTI KERÜLET-TÉRKÉP (2026-08-16). A koppintas-celpont a POLIGON, nem a potty:
   390px-en egy potty fizikailag 3-4px. A potty ezert pointer-events: none. */
.cg-ker { cursor: pointer; }
.cg-ker-alak { fill: color-mix(in srgb, var(--brand) 14%, var(--card)); stroke: var(--line-2); stroke-width: 1.6; stroke-linejoin: round; transition: fill .14s; }
.cg-ker:hover .cg-ker-alak { fill: color-mix(in srgb, var(--brand) 26%, var(--card)); }
.cg-ker.is-ures .cg-ker-alak { fill: color-mix(in srgb, var(--brand) 5%, var(--card)); }
.cg-ker.is-on .cg-ker-alak { fill: color-mix(in srgb, var(--hot) 30%, var(--card)); stroke: var(--hot); }
.cg-ker.is-fokusz .cg-ker-alak { fill: color-mix(in srgb, var(--brand) 30%, var(--card)); }
.cg-bub.is-fokusz .cg-bub-kor { fill: color-mix(in srgb, var(--brand) 92%, transparent); }
.cg-potty { fill: color-mix(in srgb, var(--brand) 85%, transparent); stroke: var(--card); stroke-width: 1.4; pointer-events: none; }
.cg-potty.is-on { fill: var(--hot); }
.cg-kercimke { fill: var(--ink-2); font-family: var(--ff); font-size: 19px; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
.cg-kercimke.is-ures { fill: var(--muted); font-weight: 600; }
.cg-kercimke.is-on { fill: var(--hot); }
/* FELFEDEZŐ-PANEL: ide bokkan ki, kik vannak ott, ahova mutatsz. A terkep ALATT van es nem
   lebego buborekban, mert erintőn nincs hover - mobilon a koppintas tolti ki ugyanezt. */
.cg-fokusz { min-height: 58px; margin: 8px auto 0; max-width: 1000px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; background: var(--paper-2); transition: border-color .14s, background .14s; }
.cg-fokusz.is-on { border-style: solid; border-color: var(--line-2); background: var(--card); }
.cg-fokusz-fej { margin: 0 0 6px; font-size: .82rem; color: var(--ink-2); }
.cg-fokusz-hint { margin: 0; color: var(--muted); }
.cg-fokusz-nevek { display: flex; flex-wrap: wrap; gap: 5px; }
/* MIN-HEIGHT 32px: 390px-en merve a nev-gombok 21px magasak voltak, ami koppintasra keves
   (a projekt szabalya: a nagy befoglalo vigye a koppintast, ne egy pici csik). */
.cg-fnev { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-2); font-family: var(--ff); font-size: .76rem; font-weight: 600; color: var(--ink-2); cursor: pointer; text-align: left; }
.cg-fnev:hover { border-color: var(--brand); color: var(--ink); }
.cg-fnev.is-on { border-color: var(--hot); color: var(--hot); }
.cg-fnev-tobb { align-self: center; font-size: .74rem; color: var(--muted); }
/* a „+N tovabbi telepules" nyito gomb: chip, de halkabb - nem szuro, hanem kinyitas */
.cg-bar .chip.cg-tobb { color: var(--muted); border-style: dashed; }
.cg-bar .chip.cg-tobb:hover { color: var(--ink-2); border-style: solid; }
.cg-tobbkartya { display: block; margin: 12px auto 0; }

/* a terkepen felvillano potty (a listabol mutatva) */
.cg-potty.is-kiemelt { fill: var(--hot); stroke-width: 2.4; }

.cg-ker-jel { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--paper-2); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.cg-k-forras { margin-left: 6px; font-size: .7rem; color: var(--muted); overflow-wrap: anywhere; }
a.cg-k-forras { text-decoration: underline dotted; text-underline-offset: 3px; }
a.cg-k-forras:hover { color: var(--ink-2); }

/* SZŰRŐSÁVOK */
.cg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.cg-bar .chip { display: inline-flex; align-items: center; gap: 5px; }
.cg-bar .chip svg { width: 13px; height: 13px; flex: none; }
.cg-szam { font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.cg-forras { margin: 0 0 12px; font-size: .8rem; line-height: 1.55; color: var(--ink-2); }
.cg-forras code { font-size: .76rem; background: var(--paper-2); border-radius: 4px; padding: 1px 5px; }

/* PIACI KÁRTYARÁCS - mobile-first: 1 oszlop, 900px felett 2, 1300 felett 3 */
.cg-racs { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .cg-racs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .cg-racs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cg-kartya { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 10px; background: var(--card); }
.cg-kartya.is-ell { border-left-color: var(--g0); }
/* a terkep felfedezo-panelrol ide ugrunk: a kartya jelolve marad, amig masra nem mutatsz */
.cg-kartya.is-kiemelt { border-color: var(--hot); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hot) 22%, transparent); }
.cg-tema { font-family: var(--ff); cursor: pointer; }
.cg-tema:hover { border-color: var(--brand); color: var(--ink); }
.cg-k-fej { display: flex; align-items: flex-start; gap: 8px; }
.cg-k-nev { flex: 1 1 auto; min-width: 0; margin: 0; font-size: .95rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.cg-k-temak { display: flex; flex-wrap: wrap; gap: 4px; }
.cg-tema { display: inline-block; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-2); font-size: .7rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.cg-k-sor { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .8rem; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.cg-k-sor svg { width: 13px; height: 13px; flex: none; }
.cg-k-leiras { margin: 4px 0 0; font-size: .82rem; line-height: 1.5; color: var(--ink); }
.cg-k-kulcs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; font-size: .74rem; color: var(--muted); }
/* a kulcsszo is szuro: 490 cegnel ez a leggyorsabb fogodzo a hasonlo muhelyekhez */
.cg-kulcs { padding: 0; border: 0; background: none; font-family: var(--ff); font-size: .74rem; color: var(--muted); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.cg-kulcs:hover { color: var(--ink-2); }
.cg-k-megj { margin: 0; font-size: .78rem; font-style: italic; color: var(--ink-2); }
.cg-k-all { display: flex; align-items: center; gap: 5px; margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line); font-size: .72rem; font-weight: 600; color: var(--muted); }
.cg-k-all svg { width: 13px; height: 13px; flex: none; }
.cg-k-all.is-ok { color: var(--g0); }

/* NMHH LISTA */
.cg-sorok { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; }
.cg-sor { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.cg-sor:last-child { border-bottom: 0; }
.cg-s-fo { flex: 1 1 240px; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.cg-s-nev { font-size: .87rem; font-weight: 700; overflow-wrap: anywhere; }
.cg-s-ceg { font-size: .74rem; color: var(--muted); overflow-wrap: anywhere; }
.cg-s-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.cg-s-web { font-size: .76rem; overflow-wrap: anywhere; }
.cg-s-web.is-nolink { color: var(--muted); text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.cg-jel { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--paper-2); color: var(--ink-2); }
.cg-jel svg { width: 13px; height: 13px; }
.cg-jel.is-halvany { opacity: .45; }

/* ── PIACI (IPARÁGI) ESEMÉNYRÉTEG (2026-08-13) ─────────────────────────────
   Az Események réteg-kapcsolója, az Idővonal 4 módja és a read-only részletező.
   SZÍN: egyetlen, nyugodt SZÜRKE (--g3) - ugyanaz a jelentés, mint a tantervben
   (szürke = külsős/ELM), nem a METU-események szivárványa. A megkülönböztetést nem
   csak a szín viszi: ÜREGES pötty + típus-chip, hogy szín nélkül is elváljon. */
.pe-sp { flex: 1; }
.pe-szam { font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.pe-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.pe-bar-sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }
.pe-tipus { display: inline-block; flex: 0 1 auto; min-width: 0; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--g3-100); color: var(--ink-2); font-size: .7rem; font-weight: 700; }
.pe-tipus--fig { border-style: dashed; background: transparent; }
html[data-theme='dark'] .pe-tipus { background: color-mix(in srgb, var(--g3) 22%, transparent); }

/* A reteg-kapcsolo CIMKEVEL (2026-08-13): felirat nelkul ket egyforma pirula allt egymas
   mellett (ez es a Lista/Naptar), es a felhasznalo nem talalta meg az iparagi adatot. */
.pe-reteg-cs { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pe-reteg-cimke { font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pe-reteg button { white-space: nowrap; }

/* lista-sorok az Események nézetben */
.pe-lista .ev-mh { color: var(--ink-2); }
.pe-row { border-left: 4px solid var(--g3); }
.pe-row .ev-title { font-weight: 700; }
/* A meta-chipek alapbol NEM tornek, ezert egy hosszu ertek 390px-en kilogott (merve:
   a piaci soroknal a szabad szoveges varhato-ido +131px, a METU-soroknal a hosszu
   helyszinnev "Budapest Kongresszusi Kozpont" +83px). Mindketto ugyanaz a hiba, ezert a
   szabaly az EGESZ esemenylistara szol, nem csak az uj sorokra. */
.ev-list .ev-main, .ev-list .ev-meta { min-width: 0; max-width: 100%; }
.ev-list .ev-meta { flex-wrap: wrap; }
.ev-list .ev-meta .m { white-space: normal; overflow-wrap: anywhere; }
.ev-list .ev-title { overflow-wrap: anywhere; }
.pe-when--varhato { color: var(--muted); font-size: 1.1rem; font-weight: 800; }
.pe-fold summary { color: var(--ink-2); }

/* ── IDŐVONAL: piaci tételek az EGY oszlopos módokban ── */
.tl2-dot--piaci { background: var(--card); border: 3px solid var(--g3); box-shadow: 0 0 0 3px var(--card); }
.tl2-dot--hat { border-radius: 3px; border-color: var(--ink-2); }
.tl2-card--piaci { border-left-color: var(--g3) !important; background: color-mix(in srgb, var(--g3) 6%, var(--card)); }
.tl2-card--hat { border-left-style: dashed; }
.tl2-tag--piaci { background: var(--g3-100); }
html[data-theme='dark'] .tl2-tag--piaci { background: color-mix(in srgb, var(--g3) 22%, transparent); }
.tl2-leg-dot--piaci { background: var(--card); border: 3px solid var(--g3); box-sizing: border-box; }
.tl2-parkkartya--piaci { border-color: var(--g3); }
.tl2-modok { margin-left: auto; flex: none; }
.tl2 .cat-block-head { flex-wrap: wrap; }

/* ── IDŐVONAL: KÉTOSZLOPOS mód (közös idő-gerinc) ──
   A két oszlop NEM két független idővonal: minden nap EGY sor, benne a bal (saját) és a
   jobb (iparági) cella - így az azonos dátum tényleg egy magasságban van, és a nézet arra
   jó, amire való: összehasonlításra. Mobilon ugyanez marad, két keskeny oszloppal. */
.tl2-par { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 30px; }
.tl2-par-fej { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 54px 1fr 1fr; gap: 6px; padding: 6px 0; background: var(--bg); border-bottom: 1px solid var(--line); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.tl2-par-fej span:first-of-type { grid-column: 2; }
.tl2-par-honap { margin: 18px 0 8px; }
.tl2-par-honap .tl2-honap { position: static; transform: none; }
.tl2-par-ma { position: relative; height: 22px; margin: 12px 0; }
.tl2-par-ma .tl2-ma-vonal { left: 0; right: 0; }
.tl2-par-ma .tl2-ma-chip { left: 54px; transform: translate(0, -50%); }
.tl2-par-nap { display: grid; grid-template-columns: 54px 1fr 1fr; gap: 6px; align-items: start; padding: 3px 0; border-top: 1px dashed var(--line); }
.tl2-par-datum { font-size: .66rem; font-weight: 800; color: var(--ink-2); padding-top: 6px; line-height: 1.2; }
.tl2-par-datum i { display: block; font-style: normal; font-weight: 600; opacity: .7; }
.tl2-par-cella { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tl2-par-kartya { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; width: 100%; min-width: 0; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px; background: var(--card); padding: 6px 8px; cursor: pointer; font-family: var(--ff); }
.tl2-par-kartya:hover { border-color: var(--line-2); }
.tl2-par-kartya--feladat { border-left-style: dotted; }
.tl2-par-kartya--surgos { border-left-color: var(--hot); }
.tl2-par-kartya--piaci { border-left-color: var(--g3); background: color-mix(in srgb, var(--g3) 6%, var(--card)); }
.tl2-par-kartya--hat { border-left-style: dashed; }
.tl2-par-cim { font-size: .78rem; font-weight: 700; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.tl2-par-meta { font-size: .68rem; color: var(--muted); overflow-wrap: anywhere; }
.tl2-par-tanev { grid-column: 1 / -1; font-size: .72rem; font-style: italic; color: var(--ink-2); background: var(--paper-2); border-radius: 6px; padding: 3px 8px; }
/* Mobilon minden pixel szamit: 390px-en a ket oszlop alapbol csak ~144px lenne (merve),
   ezert szukebb datum-oszlop, kisebb koz, es a szulo 20px-es paddingjabol visszaveszunk
   10-10 px-t. Igy ~164px marad oszloponkent - egy cim 2-3 sorban kifer. */
@media (max-width: 720px) {
  .tl2-par { margin-left: -10px; margin-right: -10px; }
  .tl2-par-fej, .tl2-par-nap { grid-template-columns: 34px 1fr 1fr; gap: 4px; }
  .tl2-par-ma .tl2-ma-chip { left: 34px; }
  .tl2-par-datum { font-size: .6rem; }
  .tl2-par-cim { font-size: .74rem; }
  .tl2-par-kartya { padding: 5px 6px; }
}

/* ── read-only részletező panel ── */
.pe-modal { width: min(620px, 100%); }
.pe-k-fej { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.pe-k-cim { font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.pe-k-leiras { margin: 2px 0 6px; font-size: .86rem; line-height: 1.55; color: var(--ink); }
.pe-k-adatok { display: flex; flex-direction: column; gap: 5px; padding: 9px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pe-k-sor { display: grid; grid-template-columns: 16px 128px 1fr; gap: 8px; align-items: start; margin: 0; font-size: .82rem; }
.pe-k-sor svg { width: 14px; height: 14px; margin-top: 2px; color: var(--muted); }
.pe-k-cimke { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding-top: 2px; }
.pe-k-ertek { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.pe-k-halvany { color: var(--muted); font-size: .78rem; }
.pe-k-kapcs { display: block; }
.pe-k-linkek { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pe-k-linkek .btn { display: inline-flex; align-items: center; gap: 5px; }
.pe-k-linkek .btn svg { width: 14px; height: 14px; }
.pe-k-fo { background: var(--hot); border-color: var(--hot); color: #fff; }
.pe-k-megj { margin: 6px 0 0; font-size: .78rem; font-style: italic; color: var(--ink-2); }
.pe-k-lab { margin: 4px 0 0; font-size: .72rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 560px) { .pe-k-sor { grid-template-columns: 16px 1fr; } .pe-k-cimke { grid-column: 2; padding-top: 0; } .pe-k-ertek { grid-column: 2; } }

/* --- SZÓTÁR (2026-08-13) --------------------------------------------------------------
   Magyar-angol szópár-lista. A `.szo-` prefix SZÁNDÉKOSAN nem `.szt-`: azt a szál-idővonal
   (SzalIdovonal.tsx) használja 28 osztállyal, két külön komponens nem osztozhat prefixen. */
.szo-count { margin: 2px 0 10px; font-size: .8rem; color: var(--ink-2); }
.szo-group { margin: 0 0 18px; }
.szo-group-head { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; font-size: .82rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.szo-group-n { font-size: .72rem; font-weight: 700; color: var(--muted); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.szo-note { margin: 0 0 7px; font-size: .74rem; font-style: italic; color: var(--muted); }
.szo-lj { color: var(--hot); font-weight: 800; cursor: help; margin-left: 2px; }

.szo-list { margin: 0; }
/* KÉT OSZLOP asztalon, EGYMÁS ALATT mobilon (mobile-first szabály: 390px-en semmi nem lóghat ki) */
.szo-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 4px 14px;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); margin: 0 0 5px; }
.szo-row.is-copied { border-color: var(--hot); background: var(--hot-100); }
.szo-hu { margin: 0; font-weight: 600; color: var(--ink); word-break: break-word; }
.szo-en { margin: 0; min-width: 0; }
.szo-copy { display: inline-flex; align-items: flex-start; gap: 6px; width: 100%; text-align: left;
  background: none; border: 0; padding: 0; font: inherit; color: var(--ink-2); cursor: pointer; word-break: break-word; }
.szo-copy:hover { color: var(--hot); }
.szo-copy-ico { flex: none; opacity: 0; font-size: .8rem; color: var(--muted); }
.szo-copy:hover .szo-copy-ico { opacity: 1; }
.szo-copied { margin-left: 6px; font-size: .7rem; font-weight: 700; color: var(--hot); }
.szo-hit { background: var(--hot-100); color: inherit; border-radius: 3px; padding: 0 1px; }

/* alfejezet-fejléc a csoporton belül (ma csak az értékelés-táblában) */
.szo-blokk { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 9px 0 5px; }
.szo-blokk-hu { font-size: .76rem; font-weight: 800; color: var(--ink); }
.szo-blokk-en { font-size: .74rem; font-style: italic; color: var(--muted); }

/* prózai útmutató (Személynevek írása) */
.szo-utmutato { border-top: 1px solid var(--line); padding-top: 14px; }
.szo-bevezeto { margin: 0 0 10px; font-size: .84rem; line-height: 1.6; color: var(--ink-2); }
.szo-nevek { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.szo-nev-oszlop { padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.szo-nev-fej { display: block; margin-bottom: 5px; font-size: .7rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); }
.szo-nev-oszlop ul { margin: 0; padding-left: 17px; }
.szo-nev-oszlop li { font-size: .84rem; line-height: 1.65; color: var(--ink-2); }
.szo-nev-oszlop li.is-fo { font-weight: 700; color: var(--ink); }
.szo-nev-labjegyzet { display: block; margin-top: 6px; font-size: .72rem; font-style: italic; color: var(--muted); }

.szo-forras { margin: 16px 0 6px; font-size: .78rem; color: var(--ink-2); }
.szo-forras summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
.szo-forras ul { margin: 7px 0 0; padding-left: 18px; }
.szo-forras li { line-height: 1.55; margin-bottom: 4px; color: var(--muted); }

@media (max-width: 560px) {
  .szo-row { grid-template-columns: 1fr; gap: 2px; }
  .szo-en::before { content: "EN "; font-size: .64rem; font-weight: 800; letter-spacing: .06em; color: var(--muted); }
  .szo-copy-ico { opacity: .55; }   /* mobilon nincs hover - a másolás-ikon végig látszik */
}

/* --- PROJEKTHÉT: fordítható kártya, sáv-színek, szünet-sorok (2026-08-13) ---------------
   User-kérés: "legyen ez jobbra balra nyíl a kártyán jobb oldalon és egy szerkesztés gomb...
   a jobbra balra pedig a projektheti programot elrejti és átfordítja és megmutatja hogy
   eredetileg kinek az órasávjában van. így akkor kompaktabb lehet a táblázat picit." */
.phv-blk { position: relative; }
.phv-blk-btns { position: absolute; top: 3px; right: 3px; display: flex; gap: 2px; z-index: 2; }
/* nagy koppintási célpont (mobil-szabály), de vizuálisan halk - hoverre/fókuszra erősödik */
.phv-blk-b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  padding: 0; border: 1px solid transparent; border-radius: 7px; background: color-mix(in srgb, var(--card) 80%, transparent);
  color: var(--muted); font-size: .84rem; line-height: 1; cursor: pointer; }
.phv-blk-b svg { width: 13px; height: 13px; }
.phv-blk-b:hover, .phv-blk-b:focus-visible { color: var(--hot); border-color: var(--line); background: var(--card); }
.phv-blk:hover .phv-blk-b { color: var(--ink-2); }

/* a fordított cella hátlapja: az "eredetileg" órasáv-gazda */
.phv-hatlap { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 38px;
  padding: 6px 30px 6px 8px; border: 1px dashed var(--line); border-radius: 8px;
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--g3) 7%, transparent) 6px 12px); }
.phv-hatlap-cim { font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.phv-hatlap-t { font-size: .74rem; font-weight: 600; color: var(--ink-2); }
.phv-hatlap-t.is-hl { color: var(--hot); }
.phv-hatlap-x { display: block; font-size: .68rem; font-weight: 400; color: var(--muted); }
.phv-hatlap-ures { font-size: .72rem; font-style: italic; color: var(--muted); }
.phv-blk-b--vissza { position: absolute; top: 3px; right: 3px; }

/* SÁV-SZÍNEK: a kártya bal élén színcsík + a chip pöttye. A színt a `--sav-szin` egyedi
   tulajdonság hozza (lib/projekthetSzin.ts), így a kártya és a chip SOSE csúszhat szét. */
.phv-blk[class*="phv-sav-"], .phv-item[class*="phv-sav-"] { border-left: 3px solid var(--sav-szin, var(--line)); }
.phv-blk-sav { margin-left: 6px; padding: 0 5px; border-radius: 999px; font-size: .6rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--sav-szin, var(--g3)); }
.phv-savszuro .phv-ochip--sav { display: inline-flex; align-items: center; gap: 5px; }
.phv-ochip-pont { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--sav-szin, var(--g3)); }
.phv-ochip--sav.is-on { border-color: var(--sav-szin, var(--hot)); box-shadow: inset 0 0 0 1px var(--sav-szin, var(--hot)); }

/* SZÜNET-SOR: vékony, HALVÁNY csík a sáv után (2026-08-13 user: "ne pirossal, hanem
   halványabban"). A piros a szabály szerint az aktív/kiemelt elemé - egy szünet nem az. */
/* a vízszintes belső margó AZONOS a sáv-cellákéval (4px), különben a szünetben a híd
   4 px-szel balrább kezdődne, mint a fölötte-alatta lévő blokk - ez adta a cikcakkot */
.phv-szunet-sor td { padding: 0 4px; border-top: 0; border-bottom: 0; }
.phv-td-szunet { height: 13px; background: color-mix(in srgb, var(--g3) 8%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--g3) 22%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--g3) 22%, transparent) !important; }
td.phv-td-time.phv-td-szunet { display: table-cell; padding: 0 6px; font-size: .6rem; font-weight: 600;
  letter-spacing: .03em; color: var(--muted); white-space: nowrap; text-align: right; }
/* HÍD: a szüneten ÁTNYÚLÓ program folytatás-jelzése (különben a szünet-sor kettévágná a
   8:00-11:10-es tömböt, amit a nyitott-alul/felül trükk egyetlen blokként mutat).
   A híd a BLOKK SAJÁT hátterét viszi tovább, nem külön színes csíkot: így a program
   láthatóan folytatódik, és a szünet-sor halvány marad (2026-08-13 user-visszajelzés). */
.phv-td-szunet .phv-hid { display: block; height: 100%; width: 100%;
  background: color-mix(in srgb, var(--g1) 7%, var(--card));
  border-left: 3px solid var(--sav-szin, var(--g1)); }
.phv-td-szunet .phv-hid + .phv-hid { margin-top: 4px; }   /* több átnyúló program egymás alatt */

@media (max-width: 560px) {
  .phv-blk-b { width: 32px; height: 32px; }   /* mobilon nagyobb célpont */
}

/* az angol réteg kapcsolója a fejlécben (a téma-gomb sorában) */
.angolbtn--head { font-size: .68rem; font-weight: 800; letter-spacing: .04em; }
.angolbtn--head.is-on { color: #fff; background: var(--hot); border-color: var(--hot); }

/* VÁLASZ-ŐR sávja a Posta-kártyán (2026-08-13): jelzés, nem lezárás */
.po-valaszor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px;
  padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--hot) 35%, transparent);
  border-radius: 8px; background: var(--hot-100); }
.po-valaszor-t { font-size: .76rem; font-weight: 600; color: var(--ink); }
.po-valaszor-s { font-weight: 400; font-style: italic; color: var(--ink-2); }
.po-valaszor-b { margin-left: auto; flex: none; }

/* AZONOS OSZLOPSZÉLESSÉG a heti táblázatban (2026-08-13, user-kérés). A tartalom eddig
   húzta szét az oszlopokat: ahol több program volt, az a nap szélesebb lett, és a hét
   szemre torznak látszott. A fix elrendezés minden napnak PONTOSAN ugyanannyit ad. */
.phv-table { table-layout: fixed; width: 100%; }
.phv-table .phv-th-time, .phv-table .phv-td-time { width: 88px; }
.phv-table thead th:not(.phv-th-time) { width: calc((100% - 88px) / 5); }
.phv-blk-t, .phv-blk-c, .phv-blk-o, .phv-blk-h { overflow-wrap: anywhere; }

/* SOLO kapcsoló a Projekthét szűrő-sorában (2026-08-13): kiemel <-> csak ez */
.phv-solo { margin-left: auto; flex: none; padding: 3px 11px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--card); color: var(--ink-2); font-size: .72rem;
  font-weight: 700; cursor: pointer; white-space: nowrap; }
.phv-solo:hover { border-color: var(--g2); color: var(--ink); }
.phv-solo.is-on { background: var(--hot); border-color: var(--hot); color: #fff; }
@media (max-width: 560px) { .phv-solo { margin-left: 0; padding: 6px 14px; min-height: 32px; } }

/* A CELLA KITÖLTÉSE (2026-08-13, user-panasz: „a kártya alatt hatalmas üres feketeség").
   A sor magasságát a legmagasabb cella adja; a kártyák eddig a saját tartalmukhoz
   méreteződtek, és alattuk üres blokk maradt. A flex-oszlop felnyújtja őket, így a blokk
   magassága a SÁVOT jelöli - úgy, ahogy egy naptárban kell. */
.phv-td-cell { height: 1px; }                 /* a height:100% ehhez tud viszonyulni */
.phv-cellbelso { display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: 34px; }
.phv-cellbelso > .phv-blk, .phv-cellbelso > .phv-cellpar > .phv-blk { flex: 1 1 auto; min-height: 0; margin-bottom: 0; }
.phv-cellbelso > .phv-hatlap { flex: 1 1 auto; }
/* a SZABAD SÁV blokk is töltse ki a sor magasságát (2026-08-24 user: „a szabad sávok vagy épp
   az előadások töltsék ki a rendelkezésre álló sáv magasságát is, ne csak félig") */
.phv-cellbelso > .phv-szabad { flex: 1 1 auto; }
/* a folytatás-csík alacsony marad, nem nyúlik fel: a cím a KEZDŐ sávban van */
.phv-blk-f { font-size: .68rem; font-weight: 700; letter-spacing: .03em; color: var(--muted); }
.phv-cellbelso > .phv-blk.is-folyt, .phv-cellbelso > .phv-cellpar > .phv-blk.is-folyt { flex: 1 1 auto; justify-content: center; }
/* EGÉSZ NAPOS PROGRAM: a TELJES OSZLOPOT jelöli (2026-08-13, user-utasítás). Minden cella
   bal szélén folyamatos sín fut végig a napon - a szünet-sorokén is, különben megszakadna -,
   és halvány oszlop-tónus mutatja, hogy a nap foglalt. A címke EGYSZER, a nap első sávjában. */
.phv-td-cell.is-eneap {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--sav-szin, var(--g2)) 70%, transparent);
  background: color-mix(in srgb, var(--sav-szin, var(--g2)) 5%, transparent); }
/* a szünet-sorban CSAK a vékony sín fut tovább (hogy az oszlop-jelölés ne szakadjon meg),
   a háttér ott is szürke marad */
.phv-td-szunet.is-eneap { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--sav-szin, var(--g2)) 70%, transparent); }
/* NEM pirula (2026-08-13, user: „ne legyen ennyire lekerekítve"): a kártyák 6px-esek, ez a
   címke egy fejléc-sáv a nap tetején, nem chip - 4px-es sarok illik hozzá. */
.phv-eneap-cimke { display: flex; align-items: center; gap: 6px; margin: 0 0 5px; padding: 3px 8px;
  border-radius: 4px; font-size: .64rem; font-weight: 800; letter-spacing: .02em; color: #fff;
  background: var(--sav-szin, var(--g2)); }
.phv-eneap-cimke > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phv-eneap-b { margin-left: auto; flex: none; color: #fff; background: rgba(255,255,255,.18); }
.phv-eneap-b:hover { color: #fff; background: rgba(255,255,255,.32); }

/* EGÉSZ NAPOS NAP: az oszlop halvány színezése jelzi, hogy a nap végig foglalt - a sávokban
   NEM ismételjük (2026-08-13, user: 5 doboz + 10 gomb egyetlen eseményre nem jelölés, hanem zaj) */

/* A TÖBB SÁVOT ÁTFOGÓ PROGRAM EGYETLEN SZÍNES FELÜLET (2026-08-13, user „ugly3": a folytatás
   üres dobozként állt, a szünet-sorban meg apró színes csík-darabkákként). A blokk, a
   folytatása és a szünet-beli hídja UGYANAZT a halvány sáv-színű hátteret kapja, tehát a
   08:00-12:50-es tömb egyetlen összefüggő felületnek látszik, nem 3 doboznak. */
.phv-blk[class*="phv-sav-"] {
  background: color-mix(in srgb, var(--sav-szin) 11%, var(--card));
  border-color: color-mix(in srgb, var(--sav-szin) 30%, transparent); }
/* A SZÜNET alapból SZÜRKE (user: „GRAY"), DE ahol UGYANAZ a program folytatódik utána, ott
   felveszi a fölötte lévő cella sáv-színét 30%-kal (user-szabály 2026-08-13). Így a szünet
   marad semleges elválasztó, a megszakítás nélkül átfutó programnál viszont látszik, hogy
   ugyanaz megy tovább. A `.phv-hid` CSAK az átnyúló programokra renderelődik. */
.phv-td-szunet .phv-hid { background: color-mix(in srgb, var(--sav-szin) 30%, transparent); border: 0; }
.phv-blk.is-folyt { border-top: 0; border-bottom: 0; }
.phv-td-szunet .phv-hid { border-right: 0; }
/* a záró sáv „vége 11:10" felirata halkan, a blokk alján ül */
.phv-cellbelso > .phv-blk.is-folyt, .phv-cellbelso > .phv-cellpar > .phv-blk.is-folyt { justify-content: flex-end; }
.phv-blk-f { font-size: .66rem; font-weight: 700; color: var(--muted); opacity: .8; }

/* RÉTEG-LEBONTÁS (2026-08-13, user: „a cellákon belül még padding, margin és újabb keretek,
   nagyon túltelítve"). Mérve: a cella szélétől a szövegig 13,8 px volt HÁROM rétegben
   (4px cella-padding + 0,8px cella-keret + a blokk 0,8px kerete és 7px paddingja), és a
   szünet fölött-alatt ehhez jött még a cellák 4-4 px-e. A cella saját paddingja megszűnik:
   a blokk KERETE lesz a cella látható széle, a napokat a táblázat rácsvonala választja el. */
.phv-table .phv-td-cell { padding: 0; }
.phv-table .phv-szunet-sor td { padding: 0; }
.phv-cellbelso { gap: 2px; }
.phv-blk { padding: 4px 6px; }
.phv-td-szunet { height: 10px; }
/* a blokk sarka a cella sarkához simul, ne legyen dupla lekerekítés-hatás */
.phv-cellbelso > .phv-cellpar > .phv-blk:only-child { border-radius: 0; }

/* A SZÜNET ALIG LÁTHATÓ (2026-08-13, user: „legyen már alig látható csak halvány").
   Vékonyabb csík, alig érzékelhető háttér és hajszálvékony keret; a felirat is halkabb.
   A 30%-os SZÍNES híd (ahol ugyanaz a program folytatódik) ettől független, az marad. */
.phv-table .phv-td-szunet { height: 8px;
  background: color-mix(in srgb, var(--g3) 4%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--g3) 10%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--g3) 10%, transparent) !important; }
.phv-table td.phv-td-time.phv-td-szunet { font-size: .56rem; font-weight: 500;
  color: color-mix(in srgb, var(--muted) 70%, transparent); }

/* SZÜNET: KERET NÉLKÜL és 20%-os folytatás-szín (2026-08-13, user „ugly6": „ne legyen kerete
   ... alig kéne látnunk a szüneteket", a rajzon 20%). A szünet nem elválasztó vonal - a sávok
   saját kerete amúgy is elhatárolja őket -, csak egy alig érzékelhető rés a rácsban. */
.phv-table .phv-td-szunet {
  border-top: 0 !important; border-bottom: 0 !important;
  background: color-mix(in srgb, var(--g3) 3%, transparent); }
.phv-table .phv-td-szunet .phv-hid { background: color-mix(in srgb, var(--sav-szin) 20%, transparent); }

/* MÉG HALVÁNYABB (2026-08-13, user): a 20% élesben még sokat mutatott. A szürke rés
   gyakorlatilag eltűnik, a folytatás-szín épp csak átdereng. */
.phv-table .phv-td-szunet { background: color-mix(in srgb, var(--g3) 1.5%, transparent); }
.phv-table .phv-td-szunet .phv-hid { background: color-mix(in srgb, var(--sav-szin) 12%, transparent); }
.phv-table td.phv-td-time.phv-td-szunet { color: color-mix(in srgb, var(--muted) 45%, transparent); }

/* a chipre írt billentyű-szám (2026-08-13): halkan, hogy tudd, mit nyomj */
.phv-ochip-kulcs { margin-left: 5px; padding: 0 4px; border-radius: 3px; font-size: .6rem;
  font-weight: 800; color: var(--muted); background: color-mix(in srgb, var(--g3) 14%, transparent); }
.phv-ochip.is-on .phv-ochip-kulcs { color: inherit; background: rgba(255,255,255,.22); }

/* ===== KATTINTHATÓ LINKEK A SZÖVEGEKBEN (2026-08-15, user-kérés: „a levelekben néha kapok
   linkeket ... a feladatkártyákon és a naptáreseményeken, továbbá az eseményeken és mindenhol
   máshol. Ezeknek kattinthatónak kell lennie ... szerkesztő módban is").
   A nyers szövegekben (összefoglaló, gist, szál, levéltörzs, jegyzet, megjegyzés) felismert
   webcím/email a `components/Linkes` révén valódi <a>. Két dolog kell hozzá vizuálisan:
   - TÖRHESSEN: egy 200 karakteres SharePoint-cím mobilon különben szétfeszíti a kártyát
     (a címke rövidül is, de a szóköz nélküli maradék még mindig hosszú lehet);
   - LÁTSZÓDJON és legyen KOPPINTHATÓ: aláhúzás + kis függőleges párna, hogy ujjal is
     eltalálható legyen (a sorköz megtartásával - inline marad, nem inline-block). */
/* a szín az app SAJÁT link-színe (`a { color: var(--brand-text) }`) - új színt nem vezetünk
   be, a piros a szabály szerint az aktív elemé. Az affordanciát a TELJES erejű aláhúzás adja
   (a halványított aláhúzás mérve gyengébb jelzés volt, mint amit a szürke szín megkíván). */
.lnk { color: var(--brand-text); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1.5px; text-decoration-color: currentColor;
  overflow-wrap: anywhere; word-break: break-word; border-radius: 4px;
  padding: 2px 1px; margin: 0 -1px; -webkit-tap-highlight-color: color-mix(in srgb, var(--hot) 22%, transparent); }
.lnk:hover, .lnk:focus-visible { color: var(--hot); text-decoration-color: currentColor;
  background: color-mix(in srgb, var(--hot) 10%, transparent); }
.lnk--mail { text-decoration-style: dotted; }
/* a telefonszám ugyanaz a link-nyelv, mint az e-mail (pontozott aláhúzás) */
.lnk--tel { text-decoration-style: dotted; }
/* DOKUMENTUM-LINK (2026-08-22, user-kérés: „kattintható linkek, amik új tabon nyílnak").
   A jogszabály-fájlnév eddig puszta szöveg volt a válaszban; most megnyitja a PDF-et.
   Szándékosan NEM aláhúzott folyószöveg-link, hanem halk „chip": a hosszú fájlnév aláhúzva
   olvashatatlan lenne egy mondat közepén. A 32px-es koppintási magasság a mobil-szabály. */
.lnk--doku {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px;
  padding: 1px 7px; border-radius: 999px; text-decoration: none;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  color: var(--ink); font-size: calc(0.84rem * var(--md-fskala, 1));
  word-break: break-all;
}
.lnk--doku:hover, .lnk--doku:focus-visible {
  background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--ink);
}
/* a forrás-lista címe, ha dokumentum: ugyanaz a jelentés, de a cím helyén marad */
.kerdezo-fcim--doku { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kerdezo-fcim--link { text-decoration: none; color: var(--ink); display: inline-block; min-height: 32px; }
.kerdezo-fcim--link:hover, .kerdezo-fcim--link:focus-visible { color: var(--hot); text-decoration: underline; }

/* „CSAK EZT MÁSOLD" GOMB az e-mail/telefon mellett (2026-08-22, user-kérés). Halk, apró
   ikon-gomb - de a KOPPINTÓ-FELÜLETE 32px, mert mobilon egy 14px-es ikon eltalálhatatlan
   (a `mobil-nagy-celpont` szabály: a pici jel nem lehet maga a célpont). A `vertical-align`
   a szöveg alapvonalára húzza, hogy a sor ne ugorjon meg tőle. */
.lnk-masol {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px; margin: -8px 0 -8px 2px; padding: 0;
  vertical-align: middle; border: 0; background: none; cursor: pointer;
  font-size: .9rem; line-height: 1; color: var(--muted);
  border-radius: 6px; transition: color .12s, background .12s;
}
.lnk-masol:hover, .lnk-masol:focus-visible { color: var(--ink); background: var(--paper-2); }
.lnk-masol--kesz { color: var(--g0); }
@media (prefers-reduced-motion: reduce) { .lnk-masol { transition: none; } }
/* mobil: nagyobb koppintási felület, a sormagasság szétverése nélkül */
@media (max-width: 720px) { .lnk { padding: 4px 2px; margin: 0 -2px; } }

/* a szerkesztő-modál link-sora: a textarea tartalmában talált címek kattintható csipekként
   (a textarea-ban a link fizikailag nem lehet kattintható) */
.linksor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; }
.linksor-c { font-size: .72rem; color: var(--muted); }
.linksor-i { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 9px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2, transparent);
  font-size: .74rem; max-width: 100%; }

/* „Linkek az eredeti levélből" (2026-08-15): a kártya szövegéből kimaradt címek, a mondattal,
   amiben állnak. A kontextus külön sorban, halkan - a link maga a kattintható elem. */
.levlink { margin: 8px 0 0; }
.levlink-b { cursor: pointer; }
.levlink-h { margin: 6px 0 0; font-size: .78rem; color: var(--muted); }
.levlink-l { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.levlink-l li { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg-2, transparent); }
.levlink-k { font-size: .76rem; color: var(--ink-2); line-height: 1.4; overflow-wrap: anywhere; }
.levlink-lab { margin: 6px 0 0; }
.levlink-lab > summary { cursor: pointer; font-size: .74rem; color: var(--muted); padding: 4px 0; }

/* a részletező Levelezés-blokkjának eligazító sora (2026-08-15): melyik levél-gomb mit csinál */
.dr-hint { margin: 8px 2px 0; font-size: .78rem; line-height: 1.5; color: var(--muted); }
.dr-hint b { color: var(--ink-2); }

/* POSTA-GOMB A RÉSZLETEZŐN: piros CSAK akkor, ha van ehhez a kártyához élő levél
   (2026-08-15, user: „legyen halványszürke, hogyha nincsen ezzel kapcsolatos levél a
   postában, mert ez így zavaró"). A piros az appban a „rám vár" jelentést viseli - ha
   nincs mire várni, a gomb hátra kell lépjen. A koppintási felület NEM változik, csak a
   szín: a gomb ugyanúgy használható (a Postához ugrik / üres levélírót nyit). */
.dr-postabtn.is-halvany { color: var(--muted); background: transparent;
  border-color: color-mix(in srgb, var(--line) 70%, transparent); font-weight: 500; }
.dr-postabtn.is-halvany svg { opacity: .6; }
.dr-postabtn.is-halvany:hover { color: var(--ink-2); border-color: var(--line-2); }
.dr-postabtn.is-halvany:hover svg { opacity: 1; }

/* KIMENŐ SOR: a TÁRGY a sor címe, a címzettek a meta (2026-08-15, user: „nézd meg a címét
   ... így nehéz beazonosítani"). Az alap `.po-mini .n` fix szélességű (flex:none), ami egy
   rövid névhez való - a tárgy viszont hosszú lehet, ezért itt ő kapja a rugalmas helyet és
   a levágást; a címzett-sor pedig zsugorodik. Mobilon a `.po-mini` amúgy is tördel. */
.po-mini--out .n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-mini--out .s { flex: 0 1 auto; font-size: .76rem; }

/* KÉSZ VÁLASZ jelvény: VILLOG, amíg a megírt válasz EL NEM MENT (2026-08-15, user: „a kész
   válasz villogjon, hogy még el nem küldött kész válasz van itt... így nem lehet észrevenni
   sehogy"). A jelvény csak akkor van kint, ha van MENTETT, még el nem küldött (draft) válasz
   a kártyán - küldés után a levél 'sent' lesz, a jelvény és vele a villogás magától eltűnik.
   A SZÍN marad zöld (a válasz kész), a MOZGÁS hordozza a sürgetést: a piros az appban a
   beérkező oldal „rám vár" jelentése, azt nem vesszük el tőle. A minta az ⚠ Átnézni
   jelvényé (poReviewFlash), hogy a felület egy nyelvet beszéljen. */
/* Erősebb, mint az ⚠ Átnézni villogása (mélypont .6 a .72 helyett, 6px gyűrű): a user
   szerint az eddigi jelzést „sehogy nem lehet észrevenni". A gyűrű elfér, a sor nem vágja
   (mérve: a jelvény minden irányban 40px+ távol a sor szélétől). */
.po-badge--kesz { animation: poKeszFlash 1.3s ease-in-out infinite; }
@keyframes poKeszFlash {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--g0) 65%, transparent); opacity: 1; }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--g0) 14%, transparent); opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
  .po-badge--kesz { animation: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--g0) 30%, transparent); }
}

/* CEG-MERET jelveny (2026-08-16): a kutatas becslese a studio meretérol, NEM hivatalos
   letszamadat - a tooltip ezt kimondja, es akinel nem derult ki, ott nincs jelveny. */
.cg-meret { display: inline-block; padding: 1px 8px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); font-size: .7rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.cg-meret--csapat { border-color: color-mix(in srgb, var(--g0) 55%, var(--line-2)); color: var(--g0); }
.cg-meret--egyeni { color: var(--muted); }

/* SZABAD SAV spot a Projektheten (2026-08-17, user-keres: "az ures, vagy szabad szpot
   legyen zold hatterrel... a lista nezeteknel pedig keretezze be szaggatottan").
   A 'szabad' sajat sav-kategoria (projekthetSzin.ts, zold #1c9e5a): a Sav-szuro chipje
   kiemeli/szuri, a szint a --sav-szin hozza. Itt csak a megjelenes: zold tonusu hatter +
   szaggatott zold keret a heti racs kartyajan ES a Lista-kartyan. A blokk SZANDEKOSAN a
   fajl VEGEN all: a phv-sav-* hatter/keret-szabalyokkal azonos specificitasu, es a
   kesobbi szabaly nyer. */
.phv-blk.is-szabad, .phv-item.is-szabad {
  border: 1px dashed var(--sav-szin, var(--g0));
  border-left: 3px dashed var(--sav-szin, var(--g0));
  background: color-mix(in srgb, var(--sav-szin, var(--g0)) 13%, var(--card));
}
.phv-blk.is-szabad .phv-blk-t, .phv-item.is-szabad .phv-title { font-style: italic; }

/* A cella-kartya cime nem futhat a jobb felso (⟲/✎) gombok ala (2026-08-17, user-jelzes:
   a hosszu cim belelogott a gombokba). A gombsor absolute, ezert a cim kap jobb oldali
   helyet; mobilon a gombok nagyobbak (32px), ott tobb kell. */
.phv-td-cell .phv-blk .phv-blk-t { padding-right: 58px; }
@media (max-width: 720px) { .phv-td-cell .phv-blk .phv-blk-t { padding-right: 72px; } }

/* FEJLEC-GOMBOK: EGY FIX FLEX-SOR (2026-08-17, user-jelzes: "hova lett a sotet vilagos
   mod gomb?"). A gombok korabban egyenkent, beegetett `right: 14/58/102px` ertekekkel
   ultek a sarokban, es az EN gomb (2026-08-13) sajat `right` nelkul maradt -> az alap
   14px-en, PONTOSAN a tema-gombon landolt es eltakarta. Egy sor + gap ezt szerkezetileg
   kizarja: uj gomb felvetelekor nincs mit szamolni, es a hianyzo gomb (nincs canEdit /
   nincs fullscreen-tamogatas) helyen nem marad lyuk sem.
   `row-reverse`: a DOM-ban ELSO gomb (tema) a JOBB szelen marad, ahol megszokott.
   A blokk a fajl VEGEN all, mert a 218-223. sorok `right`-jait kell semlegesitenie. */
.headbtns { position: fixed; top: 12px; right: 14px; z-index: 70; display: flex; flex-direction: row-reverse; gap: 8px; }
.headbtns .themebtn--head { position: static; top: auto; right: auto; }
@media (max-width: 720px) {
  .headbtns { top: 8px; right: 10px; gap: 6px; }
  .headbtns .themebtn--head { top: auto; right: auto; }
}

/* BETŰMÉRET-VEZÉRLŐ (2026-08-18, user-kérés: „minden olvasható szövegméretet resetelni,
   és plusz-mínusz irányba növelni"). Az „A" gomb a fejléc-gombsorban ül, a panel a sor
   ALATT: a `.headbtns` row-reverse sorában a gomb vízszintes helye a látható gombok
   számától függ (csengő = csak szerkesztőnek, teljes képernyő = csak ha támogatott),
   ezért a panelt nem a gombhoz, hanem a jobb szélhez horgonyozzuk.

   A GOMBSOR ÉS A PANEL SZÁNDÉKOSAN A SKÁLA FÖLÖTT ÁLL (fix px): a vezérlő ne nőjön
   azzal, amit állít. A glyph-ek rem-ben 160%-on kinőnék a 36/32px-es körökből, a panel
   pedig kilógna a képernyőről - miközben a gomb-átmérő nem skálázódik, hogy a sor
   mobilon ne foglalja el a képernyő felét. Az itteni px-ek a MAI (100%-os) rem-értékek:
   1rem=16px asztalon, .9rem=17px mobilon, .68rem=11/13px az EN gombon. */
.headbtns .themebtn--head { font-size: 16px; }
.headbtns .fontbtn--head { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
/* az EN saját mérete a fenti sor UTÁN áll, mert azonos specificitáson a későbbi nyer */
.headbtns .angolbtn--head { font-size: 11px; }
.fontbtn--head.is-on { color: #fff; background: var(--hot); border-color: var(--hot); }

.fontpanel { position: fixed; top: 56px; right: 14px; z-index: 71; display: flex; align-items: center; gap: 6px; padding: 7px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 10px 30px rgba(16, 17, 20, .26); animation: fontpanelBe .16s ease both; }
@keyframes fontpanelBe { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
.fp-gomb { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; cursor: pointer; font-family: var(--ff); font-size: 18px; font-weight: 800; line-height: 1; }
.fp-gomb:hover:not(:disabled) { border-color: var(--brand); }
.fp-gomb:disabled { opacity: .3; cursor: default; }
/* a középső mező a jelenlegi százalék ÉS a visszaállítás gombja; 100%-on tiltott,
   mert nincs mit visszaállítani (a tiltás maga az „alapon vagy" visszajelzés) */
.fp-ert { min-width: 76px; height: 44px; padding: 0 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; cursor: pointer; font-family: var(--ff); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fp-ert:hover:not(:disabled) { border-color: var(--brand); }
.fp-ert:disabled { opacity: .45; cursor: default; }
.fp-ert.is-mod { color: #fff; background: var(--hot); border-color: var(--hot); }
@media (max-width: 720px) {
  .headbtns .themebtn--head { font-size: 17px; }
  .headbtns .fontbtn--head { font-size: 14px; }
  .headbtns .angolbtn--head { font-size: 13px; }
  .fontpanel { top: 48px; right: 10px; }
}

/* PROJEKTHET: UJ PROGRAM FELVETELE (2026-08-17, user-jelzes: "hova lett az uj esemeny
   felvetele gomb? nem tudok a projekthetre felvenni semmi ujat?"). Ket belepesi pont:
   1) `.phv-tabadd` - a ful-sor jobb szelen allo, MINDEN fulon lathato gomb (a hozzaadas
      addig csak a Lista ful nap-fejleceiben volt, kozben a Heti tablazat az alapertelmezett
      ful). `margin-left: auto` tolja jobbra; a .phv-tabs `flex-wrap` miatt szuk kijelzon
      sajat sorba kerul, nem szorítja ki a fuleket.
   2) `.phv-cellplus` - a rács URES cellajaban allo halvany gomb, ami a cella napjaval es
      orasavjaval eloltve nyit. Alapban visszafogott (a tabla ne legyen zsufolt), hoverre /
      fokuszra elesedik; mobilon nagyobb celpont, mert ott a hover nem letezik. */
.phv-tabs .phv-tabadd { margin-left: auto; }
.phv-cellplus {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; margin-top: auto; padding: 5px 6px;
  border: 1px dashed var(--line); border-radius: 6px; background: transparent;
  color: var(--ink-3); font-size: .7rem; font-weight: 700; cursor: pointer;
  opacity: .38; transition: opacity .12s, border-color .12s, color .12s;
}
.phv-cellplus svg { width: 12px; height: 12px; }
.phv-cellplus:hover, .phv-cellplus:focus-visible { opacity: 1; border-color: var(--brand); color: var(--ink); border-style: solid; }
@media (max-width: 720px) {
  .phv-cellplus { padding: 9px 6px; opacity: .5; }   /* erintesre nagyobb celpont, latszobb */
}

/* PROJEKTHET „+ Program" a ful-sorban (2026-08-17, user-jelzes: "fekete es ha ravszem az
   egeret szurke lesz a betu?? ne mar"). MERVE a computed style-bol: a `.phv-tabs button`
   (0,1,1) legyozte a `.btn--ink` (0,1,0) betuszinet -> szurke maradt, a `.btn--ink:hover`
   (0,2,0) viszont a hattert feketere vitte -> fekete alapon szurke szoveg. Ezert kap a gomb
   sajat, TELJES allapot-keszletet a `.phv-tabs .phv-tabadd` (0,2,1) szelektoron: nem fekete,
   es a betu egyik allapotban sem szurkul. Kiemeles a brand-kerettel, nem hatterrel (a piros
   az aktiv/kiemelt elem szine, egy felveteli gomb nem az). */
.phv-tabs .phv-tabadd { background: var(--card); color: var(--ink); border-color: var(--brand); font-weight: 800; }
.phv-tabs .phv-tabadd:hover, .phv-tabs .phv-tabadd:focus-visible {
  background: color-mix(in srgb, var(--brand) 10%, var(--card)); color: var(--ink); border-color: var(--brand);
}
.phv-tabs .phv-tabadd svg { width: 14px; height: 14px; }

/* A LEBEGŐ MENTES-DOKK ne ehesse meg az utolso sort/linket (2026-08-17, user-jelzes: "a
   habilitacional pl. nagyon ralognak a gombok a linkekre. ez jopar helyen elofordul").
   Mérve a Habilitacion: a dokk a jobb also sarokban egy KATTINTHATO linket (`a.hab-link`,
   "MAB ETP Utmutato") takart. A megoldas GORGETHETO TER a tartalom alatt - a dokk maga
   valtozatlan marad (egy kompakt/halvany dokkot a user elvetett: "nagyon ronda lett...
   inkabb tegyel a linkek div ala a jobb oldalon egy nagyobb margint").
   CSAK a NEZET-konteneren (`.wrap.orv`) - a `.wrap` maga ALTALANOS osztaly, a masthead es a
   toolbar is viseli: elso nekifutasra `.wrap:not(.orv--fixhead)`-et irtam, es a fejlec 141px,
   az eszkoztar 215px magas lett (merve). Az `orv` osztaly valasztja el a nezeteket. */
.orv-scroll { padding-bottom: 96px; }
.wrap.orv:not(.orv--fixhead) { padding-bottom: 96px; }

/* A JOBB OLDALI LINK-PANEL a Habilitacion `position: sticky` (3628. sor), ezert a
   konteneren levo alsó padding NEM segit rajta: a tapadó panel a sajat grid-cellajan belul
   mozog, es ha a cella pontosan olyan magas, mint a panel, az alsó tetelei SOSEM kerulnek a
   dokk fole. A cella alá tett margo ad neki gorgetheto utat - annyit, hogy a hiba-uzenetekkel
   megnott dokk fole is fel tudjon csuszni. */
@media (min-width: 721px) {
  .hab-links { margin-bottom: 120px; }
}

/* ── BORÍTÉK (components/Boritek.tsx) - a közös címzett-megjelenítő és -szerkesztő ──────────
   2026-08-19. A Posta nyitott sora, a Titkárnő-wizard mindhárom lépése, a Postázó fold és a
   Kimenő ugyanezt a komponenst kapja, ezért a stílus is EGY helyen él. A blokk a fájl VÉGÉN
   áll: azonos specificitáson a későbbi szabály nyer, tehát innen nem tud fölé írni a régi,
   szétszórt címzett-sor CSS-e (a `.po-cc-*` osztályok érintetlenek maradnak).
   Mobil-elsőség: minden koppintható elem legalább 34px magas (720px alatt 38px), a chipek
   törnek, a kompakt sor levág - 390px-en nincs vízszintes túlcsordulás.
   A REJTETT MÁSOLAT megkülönböztetése halvány: 🔒 előtag a címkében + szaggatott chip-keret.
   SZÁNDÉKOSAN nem piros, mert az appban a piros a „rám vár" jelentést viseli. */
.bor { display: flex; flex-direction: column; gap: 8px; max-width: 100%; min-width: 0; }
.bor-cim { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.bor-csoport { display: flex; flex-direction: column; gap: 4px; max-width: 100%; min-width: 0; }
.bor-cimke { font-size: .72rem; font-weight: 800; color: var(--ink-2); }
.bor-chipek { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; min-width: 0; }
.bor-ures { font-size: .76rem; color: var(--muted); font-style: italic; }
.bor-chip { display: inline-flex; align-items: center; min-height: 34px; max-width: 100%; padding: 4px 12px; font: inherit; font-size: .76rem; font-weight: 600; color: var(--ink); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; overflow-wrap: anywhere; }
button.bor-chip { cursor: pointer; text-align: left; }
button.bor-chip:hover { border-color: var(--brand); }
.bor-chip.is-on { color: var(--brand-text); border-color: var(--brand); background: var(--card); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 22%, transparent); }
.bor-csoport--rejtett .bor-chip { border-style: dashed; background: var(--card); }
.bor-tobb, .bor-add { min-height: 34px; padding: 4px 12px; font: inherit; font-size: .76rem; font-weight: 700; color: var(--ink-2); background: var(--card); border: 1px dashed var(--line-2); border-radius: 999px; cursor: pointer; }
.bor-tobb:hover, .bor-add:hover { color: var(--brand-text); border-color: var(--brand); }
/* a chipre koppintva nyíló művelet-sor: az aktuális szerep gombja nem jelenik meg */
.bor-muvelet { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: color-mix(in srgb, var(--ink) 8%, var(--card)); border: 0; border-radius: 8px; max-width: 100%; }
.bor-mgomb { min-height: 34px; padding: 4px 12px; font: inherit; font-size: .76rem; font-weight: 700; color: var(--ink); background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.bor-mgomb:hover { color: var(--brand-text); border-color: var(--brand); }
.bor-mgomb--torol { color: var(--ink-2); }
.bor-mgomb--torol:hover { color: var(--hot); border-color: var(--hot); }
/* Névjegyzék-kereső a „+ hozzáadás" mögött (a po-cc-kereso mintája) */
.bor-kereso { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: color-mix(in srgb, var(--ink) 8%, var(--card)); border: 0; border-radius: 8px; max-width: 100%; }
.bor-kereso input { width: 100%; min-height: 34px; padding: 8px 12px; font: inherit; font-size: .84rem; color: var(--ink); background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; }
.bor-talalat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; min-height: 34px; padding: 8px 12px; font: inherit; font-size: .84rem; text-align: left; color: var(--ink); background: none; border: 0; border-radius: 8px; cursor: pointer; }
.bor-talalat:hover { background: var(--paper-2); }
.bor-talalat b { font-weight: 700; overflow-wrap: anywhere; }
.bor-talalat span { font-size: .76rem; color: var(--muted); overflow-wrap: anywhere; }
/* KOMPAKT: egyetlen sor. 2026-08-20 óta KOPPINTHATÓ KAPCSOLÓ (user: „a CC-ket továbbra sem
   látom, csak annyit, hogy cc 2... ezt meg lehessen nézni kattintásra, on-off"): a névsor
   eddig kizárólag a `title` tooltipben élt, ami mobilon elérhetetlen. A sor szövege betűre
   a régi maradt, a gomb csak egy ▸/▾ jelzőt és 40px-es koppintó-magasságot kapott; a szöveg
   saját, BLOKK-szintű dobozban ül, hogy a szóközök és a törés pontosan a régiek legyenek.
   Keretet és hátteret SZÁNDÉKOSAN nem visel (S3): a kártya kerete a blokk egyetlen széle. */
.bor--kompakt { gap: 4px; }
.bor-kompakt { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 100%; min-width: 0; min-height: 40px; padding: 4px 0; font: inherit; font-size: .76rem; text-align: left; color: var(--ink-2); background: none; border: 0; }
button.bor-kompakt { cursor: pointer; }
.bor-kompakt--holt { min-height: 0; padding: 0; }
/* `flex: 0 1 auto`, hogy a nyitás-jelző KÖZVETLENÜL a szöveg után álljon: a szerkesztő-
   fejlécben a gomb 1000px széles (a ✎ mellett kitölti a sort), és egy jobb szélre kilökött
   ▸ elszakadna attól, amit nyit. A koppintó-felület marad a teljes sor. */
.bor-k-szoveg { display: block; flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.bor-kompakt b { font-weight: 700; color: var(--ink); }
.bor-k-rejtett { border-bottom: 1px dashed var(--line-2); }
/* a nyitás-jelző: halk, nem akció-színű - a sor maga a gomb, nem ez a kis jel */
.bor-k-jel { flex: none; font-size: .72rem; font-weight: 700; color: var(--muted); }
button.bor-kompakt:hover .bor-k-jel, .bor-kompakt.is-on .bor-k-jel { color: var(--brand-text); }
/* A KINYITOTT NÉVSOR: szerepenként egy sor (CÍMZETT / MÁSOLAT / 🔒 REJTETT MÁSOLAT), a cím
   a közös szekciócím-mintán (.68rem/800/uppercase/muted), alatta a nevek törhető sorban.
   A rejtett kör a MEGLÉVŐ halk mintát viseli (szaggatott alsó vonal + ink-2), NEM pirosat:
   az appban a piros a „rám vár". Belső görgető nincs - a lista folyik, a lap görget. */
.bor-reszlet { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 100%; min-width: 0; padding: 0 0 4px; }
.bor-rsor { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bor-rcim { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bor-rnevek { display: flex; flex-wrap: wrap; gap: 0 4px; font-size: .76rem; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.bor-rnev { max-width: 100%; overflow-wrap: anywhere; }
.bor-rsor--rejtett .bor-rnevek { color: var(--ink-2); }
.bor-rsor--rejtett .bor-rnev { border-bottom: 1px dashed var(--line-2); }
/* PROGRESSZÍV FELTÁRÁS (2026-08-19, V3) - a szerkesztő csukott alapállapota.
   Az összegző sor a kompakt nézet szövegét viseli (.bor-kompakt), mellette a halk mód-csip és
   EGY nyitó gomb. Keretet nem kap: a kártya kerete a blokk egyetlen látható széle (S3), a
   nyitott szerkesztőt egy hairline választja el - nem újabb doboz. */
.bor--szerk { gap: 8px; }
.bor-osszegzo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }
.bor-osszegzo .bor-kompakt { flex: 1 1 12rem; min-width: 0; }
/* A kinyitott névsor a szerkesztő-fejlécben SAJÁT SORBA törik (a ✎ gomb mellé szorítva
   390px-en 4-5 karakter férne el). Flex-sorban ezt a 100%-os flex-basis kényszeríti ki;
   a kompakt (oszlop-irányú) nézetben erre nincs szükség, ott a width: 100% elég. */
.bor-osszegzo .bor-reszlet { flex: 1 0 100%; padding-top: 4px; }
/* SEMLEGES jelvény-család (S5): 20px, .72rem/700, brand-tónus - se keret, se piros */
.bor-mod { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 8px; font-size: .72rem; font-weight: 700; color: var(--ink-2); background: color-mix(in srgb, var(--brand) 10%, transparent); border-radius: 999px; white-space: nowrap; }
/* a kompakt nézet oszlop-flex: a csip ne nyúljon a sor teljes szélességére */
.bor--kompakt .bor-mod { align-self: flex-start; }
.bor-nyit, .bor-kesz { min-height: 34px; padding: 4px 12px; font: inherit; font-size: .76rem; font-weight: 700; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.bor-nyit:hover, .bor-kesz:hover { color: var(--brand-text); border-color: var(--brand); }
.bor-nyit.is-on { color: var(--brand-text); border-color: var(--brand); background: var(--paper-2); }
/* a nyitott szerkesztő: halvány hairline-elválasztó felül, 12px belső rés (S1) */
.bor-szerk { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); max-width: 100%; min-width: 0; }
.bor-labl { display: flex; }
/* PRESET-SOR: a látható három címzett-mód. Az aktív gomb `is-on`; a komponens csak jelez. */
.bor-presetek { display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%; }
.bor-preset { min-height: 34px; padding: 4px 12px; font: inherit; font-size: .76rem; font-weight: 700; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.bor-preset:hover { color: var(--brand-text); border-color: var(--brand); }
.bor-preset.is-on { color: var(--brand-text); background: var(--paper-2); border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 20%, transparent); }
@media (max-width: 720px) {
  .bor-chip, .bor-tobb, .bor-add, .bor-mgomb, .bor-preset, .bor-talalat { min-height: 38px; }
  /* a nyitó/záró gomb a blokk FŐ vezérlője: mobilon teljes értékű, 40px-es célpont */
  .bor-nyit, .bor-kesz { min-height: 40px; }
  /* a 16px-es alsó korlát az iOS miatt kell: a kisebb betűs mezőre fókuszálva rázoomol */
  .bor-kereso input { min-height: 38px; font-size: max(16px, calc(16px * var(--md-fskala, 1))); }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   POSTA-DESIGNRENDSZER (2026-08-19, V1) - a po-/szt-/bor- felületek KÖZÖS alapja.
   A blokk SZÁNDÉKOSAN a fájl legvégén áll: azonos specificitáson a későbbi szabály nyer,
   tehát innen egységesíthetők azok az osztályok, amiknek fentebb saját, egyedi
   definíciójuk van. Ami itt NINCS felülírva, az a fenti szabályát tartja meg.
   Az osztálynevek betűre a régiek maradtak - a JSX-hez ez a kör hozzá sem nyúlt.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* ---- S4: EGYETLEN szekciócím-minta -------------------------------------------------
   Eddig hat különböző fokon és három színnel álltak a szekciócímek (.72/.76/.78/.84rem,
   muted/ink-2/ink), ezért a nyitott sorban nem lehetett ránézésre látni, mi a cím és mi a
   tartalom. Innentől mind: .68rem / 800 / nagybetűs / .06em / --muted, alatta 8px rés. */
.po-blokk-h2, .po-fold-h, .po-decide-h, .po-sched-h, .po-wiz-steph, .po-wiz-egylevel-h,
.po-readedit-l, .po-wiz-base-h, .szt-fej-cim, .bor-cim, .po-ajanlat-h,
.po-regitervek > summary, .po-wiz-tpl > summary {
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
/* A boríték CSOPORT-címkéi (Címzett / Másolat / 🔒 Rejtett másolat) egy fokkal a szekciócím
   ALATT állnak: azonos betűfok, de nagybetű és ritkítás nélkül, sötétebb szürkén - különben
   a „KINEK MEGY A VÁLASZ" szekciócím és a három mezőcímke ránézésre egyforma súlyú lenne. */
.bor-cimke { font-size: .68rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
/* 8px rés a cím alatt. CSAK ott margóval, ahol a szülő nem flex-gap-es (a .po-blokk,
   a .bor és a .szt-fej gapje már pontosan 8px - ott a margó duplázna). */
.po-decide-h, .po-wiz-egylevel-h { margin: 0 0 8px; }
/* a JELENTÉST hordozó szín marad (zöld = kész, brand = ütemezett) - csak a fok egységes */
.po-sched-h { color: var(--brand-text); }
.po-wiz-base-h { color: var(--g0); }
/* a wizard PIROS SZÁMKORONGJA megszűnik: a piros a rendszerben "rám vár"/fő akció, nem
   dekoráció. A lépés száma sima szöveg, ponttal elválasztva: „1 · A LEVÉL". */
.po-wiz-steph .n {
  display: inline; width: auto; height: auto; padding: 0; border-radius: 0;
  background: none; color: var(--muted); font-size: .68rem; font-weight: 800;
}
.po-wiz-steph .n::after { content: ' ·'; }
.po-wiz-decide .po-wiz-steph .n { background: none; color: var(--muted); }

/* ---- S5: EGY jelvény-alap, ÖT színcsalád --------------------------------------------
   FIGYELEM = --hot (piros CSAK itt: válasz nélkül, elavult, feldolgozatlan, 48 órán belüli
   határidő) · KÉSZ = --g0 (a KÉSZ VÁLASZ villogása user-kérésre marad) · HARMADIK FÉL =
   --fwd kék (teli = továbbítva, üreges = még csak előkészítve) · IDŐ/HATÁRIDŐ =
   --yellow-deep · SEMLEGES = a brand-tónusú alap. Az alak (20px, 2px/8px, .72rem/700,
   999px) az alap-szabályban van, itt CSAK a szín különbözik - így nem tud szétcsúszni. */
.po-badge--utolso, .po-badge--var, .po-badge.warn, .po-badge.po-review {
  background: var(--hot-100); color: var(--hot);
}
.po-badge--var { border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hot) 35%, transparent); }
.po-badge.po-review { border: 0; box-shadow: inset 0 0 0 1px var(--hot); }
.po-badge--utolso { white-space: normal; font-weight: 800; }
.po-badge.ok { background: color-mix(in srgb, var(--g0) 14%, transparent); color: var(--g0); }
/* a KÉSZ VÁLASZ az EGYETLEN jelvény, ami gomb is - ezért kap a 20px-es alapnál nagyobb
   belső térközt, mobilon pedig teljes értékű, 40px-es koppintó-célpontot. */
.po-badge--kesz { background: var(--g0); color: #fff; border: 0; font-weight: 800; cursor: pointer; padding: 4px 12px; }
@media (max-width: 720px) { .po-badge--kesz { min-height: 40px; } }
.po-badge--fwd { background: var(--fwd); color: #fff; }
.po-badge--fwdprep { background: none; color: var(--fwd); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fwd) 45%, transparent); }
/* IDŐ/HATÁRIDŐ-család: a jelvényt a V4 sor-átépítése teszi ki (határidő, követés,
   visszatérés) - az alak és a szín itt már készen áll hozzá. */
.po-badge--ido { background: color-mix(in srgb, var(--yellow-deep) 22%, transparent); color: color-mix(in srgb, var(--yellow-deep) 78%, var(--ink)); }
html[data-theme='dark'] .po-badge--ido { color: var(--yellow-deep); }

/* ---- S3: chip = TÓNUS vagy KERET, sosem mindkettő -----------------------------------
   Az átlátszó keret megmarad a helyfoglalás miatt, így a hover/kiválasztás továbbra is
   csak a border-color átírásával dolgozik (a fenti szabályok változatlanok maradhattak). */
.bor-chip, .szt-tag { border-color: transparent; }
button.bor-chip:hover { border-color: var(--brand); }
.bor-chip.is-on { border-color: var(--brand); }
.bor-csoport--rejtett .bor-chip { border-color: var(--line-2); }

/* Az elavult tervek foldja a KÁRTYÁN BELÜL ül, ezért nem viselhet saját (szaggatott)
   keretet a kártya kerete mellett - a tónus és a szekciócím-summary elég. A wizard
   sablon-foldja (.po-wiz-tpl) NEM kártyán belül van, az megtartja a keretét. */
.po-regitervek { border: 0; background: color-mix(in srgb, var(--ink) 4%, var(--card)); }

/* ---- MOBIL: 40px-es koppintó-célpont ------------------------------------------------
   A Posta-felületek eddigi mobil-minimuma 38px volt, a felolvasási tempó-chipeké pedig
   mindössze 25px - fél kézzel, menet közben ez kevés (a keretszabály ~44px-et ír elő).
   A magasság nő, a betűfok NEM: a létra érintetlen marad. */
@media (max-width: 720px) {
  .po-ful, .po-dontsor .btn, .po-dontinfo-b, .po-cc-add, .po-cc-scope, .po-draft-h .btn,
  .bor-chip, .bor-tobb, .bor-add, .bor-mgomb, .bor-preset, .bor-talalat { min-height: 40px; }
  .po-speed-b { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 12px; }
  /* a kimenő levél melléklet-csipje és a × levétel-gombja is ujjbegy-méretű (2026-09-05) */
  .po-attach--ki .po-attach-i, .po-attach-x { min-height: 40px; }
}

/* SZAL: piros CSAK a valoban nyitott kerdesen (2026-08-19, user-eszrevetel: „mar
   valaszoltam, megis pirossal irja"). A megvalaszolt uzenet velemeny-sora halk ✓;
   a soronkenti Titkarnonek gomb pedig NEM elsodleges akcio - a piros kitiltva rola,
   csendes korvonalas gomb lett (az is-on/kijelolt allapot zold marad). A blokk a
   fajl VEGEN all: azonos specificitason a kesobbi szabaly nyer. */
.szt-velemeny--kesz { color: var(--g0); opacity: .75; font-weight: 600; }
.szt-atad { background: transparent; color: var(--ink-2); border: 1px solid var(--line); }
.szt-atad:hover { border-color: var(--line-2); color: var(--ink); }
.szt-atad.is-on { background: color-mix(in srgb, var(--g0) 14%, transparent); color: var(--g0); border-color: color-mix(in srgb, var(--g0) 40%, var(--line)); }

/* ---- V4/S6: döntés-sor 3 + ⋯ --------------------------------------------------------
   A második sor a MÁSODIK FELE ugyanannak a sornak, ezért NEM kap saját szaggatott
   elválasztót (az S3 keret-fegyelme: egy blokknak egy látható széle van) - csak 8px rés
   választja el a fölötte lévő gomboktól. A ⋯ nyitó szürke marad: nem döntés, csak feltárás. */
.po-dontsor--tobb { border-top: 0; padding-top: 8px; }
.po-donttobb-b { color: var(--muted); }
.po-donttobb-b[aria-expanded='true'] { color: var(--ink); }
/* EGY-NOTE-SZABÁLY: a sorról leszorult jegyzetek a ⓘ panel külön soraiban élnek tovább */
.po-dontinfo-sor { margin-top: 8px; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   V5 - TITKÁRNŐ-WIZARD (2026-08-19). A 2/3 lépés HÁROM tiszta szekcióra bomlott
   („1 · A LEVÉL" · „2 · CÍMZETTEK" · „3 · A VÁLASZOD"), az 1/3 és a 3/3 a V1-es
   térköz-/betű-rendszerre igazodott. A blokk a fájl VÉGÉN áll: azonos specificitáson a
   későbbi szabály nyer, tehát innen felülírhatók a fentebbi, egyedi po-wiz- definíciók.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* ---- S1: a 2/3/5px-es köztes térközök a 4/8/12/16/24 skálára ------------------------
   Ezek a margók flex-gap-es szülőkben ültek, tehát 8+2 = 10px-es, skálán kívüli réseket
   adtak. A gap marad az egyetlen térköz-forrás. */
.po-wiz-gist, .po-wiz-thread, .po-wiz-tabs, .po-wiz-toolrow,
.po-wiz-letter .po-tocc { margin-top: 0; }
.po-wiz-egylevel { margin: 0; }
.po-atadsav { margin: 0; }
.po-wiz-kinek-ido { padding: 4px 12px; }
.po-wiz-tpl > summary { padding: 8px 4px; }

/* ---- S2: a kiemelt cím a létra felső fokán (1.02rem/800) ---------------------------- */
.po-wiz-subj { font-weight: 800; }
/* A haladás-sor a lépés-fejléc: nem szekciócím (az .68rem/muted lenne), hanem az „hol
   tartok" jelzés - ezért marad .84rem/ink-2, de az S4 ritkításával és súlyával. */
.po-wiz-prog .stepname { font-weight: 800; letter-spacing: .06em; }
/* SZÍN-TÖRVÉNY (S6/7): a piros „rám vár"/fő akció, nem helyzetjelző. Az aktuális lépés
   pöttye ezért a szerkezeti --ink; a már elvégzett lépéseké marad zöld (= kész). */
.po-wiz-dots .dt.on { background: var(--ink); }

/* ---- S4: a három szekció a 2/3 lépésen ---------------------------------------------
   Szekciók közt EGY hairline + 16px; keret egyiken sincs (S3: keretet csak a kártya, az
   input és a gomb visel). A cím a közös S4-mintán áll, a lépés-száma sima szövegként. */
.po-wiz-step + .po-wiz-step { border-top: 1px solid var(--line); padding-top: 16px; }

/* ---- 1 · A LEVÉL: a hangsáv a panel summary-sora ALÁ olvad --------------------------
   Addig a hangsáv ÖNÁLLÓ, saját keretes blokként állt a levél-panel FÖLÖTT - két
   egymás alatti keret ugyanarról a levélről. Ma a panelen belül, keret és külön padding
   nélkül, EGY kompakt sorként áll: a panel kerete az egyetlen látható széle. */
.po-wiz-levelpanel { padding: 0 12px 12px; }
.po-wiz-levelpanel > * + * { margin-top: 8px; }
.po-wiz-levelpanel-b { margin: 0; }
.po-wiz-levelpanel .po-audiobar { border: 0; padding: 0; border-radius: 0; }

/* ---- 2 · CÍMZETTEK -----------------------------------------------------------------
   A burkoló `display: contents`: NEM visz be új konténer-szintet (S3, max 2 szint), csak
   a needScope-kiemelés horgonya - így a Boritek belsejéhez ez a kör nem nyúlt hozzá. */
.po-wiz-scope { display: contents; }
/* Amíg nincs döntés a válasz köréről, a preset-sor ELSŐ KÉT gombja (Csak a feladónak /
   Mindenkinek - a látható presetek sorrendje: csak-felado, mindenki, tovabbitas) kiemelt
   DÖNTÉS-állapotot visel. A piros itt szabályos: ez a „rám vár" jelentés. */
.po-wiz-scope.is-dontes .bor-preset:nth-child(1),
.po-wiz-scope.is-dontes .bor-preset:nth-child(2) {
  min-height: 40px; padding: 8px 16px; font-weight: 800;
  color: var(--hot); border-color: var(--hot); background: var(--hot-100);
}
/* A továbbítás-panel a CÍMZETTEK szekción BELÜL él (a „Továbbítás…" chip nyitja): saját
   keretet nem kap, csak egy elválasztó hairline-t és paper-2 tónust. */
.po-wiz-step > .po-fwd {
  margin: 8px 0 0; padding: 12px; border-radius: 0 0 8px 8px;
  background: var(--paper-2); border-top: 1px solid var(--line);
}
.po-wiz-step > .po-fwd .po-scope-q { margin-bottom: 8px; }

/* ---- 3 · A VÁLASZOD: a Tudakozó kis eszköz a mező felett ---------------------------- */
.po-wiz-tudsor { margin: 0; }

/* ---- MOBIL (390px): a wizard MINDEN vezérlője legalább 40px magas -------------------
   Eddig a .po-dictbtns/.po-audiobar/.po-wiz-foot gombjai voltak 42px-esek, a fül-sor, a
   mód-kapcsoló, a visszalépő fejléc-gomb, a Tudakozó-sor és a továbbítás-chipek viszont
   30-34px-en álltak. A magasság nő, a betűfok NEM: a létra érintetlen. */
@media (max-width: 720px) {
  .po-wiz .btn, .po-wiz-tabs button, .po-wiz-recap, .po-modetgl button,
  .po-wiz-tpl > summary, .po-wiz-levelpanel > summary,
  .po-tud-pick, .po-fwd-chip, .po-fwd-chip button { min-height: 40px; }
  .po-wiz .po-card, .po-wiz .po-fullmore { display: inline-flex; align-items: center; min-height: 40px; }
  .po-wiz-q input, .po-wiz .po-tud-q, .po-wiz .po-fwd-ack-ta { min-height: 40px; }
  /* a ⋯ nyitó a sor VÉGÉN, nem nyúlik teljes szélességre (nem döntés, csak feltárás) */
  .po-dictbtns .po-donttobb-b { flex: 0 0 auto; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   V5/b - NINCS DUPLA GÖRGETÉS A POSTÁBAN (2026-08-19, user-szabály szó szerint:
   „görgetek egy diven belül, és azon kívül az oldal is görgethető - ez tilos").
   A tartalom FOLYIK, a lap görget. Megszüntetett belső, FÜGGŐLEGES görgetők:
     .po-wiz-levelpanel-b  (max-height 38vh)   - a 2/3 lépés levél-panelének törzse
     .po-wiz-base-b        (max-height 180px)  - „A meglévő válasz - ezt javítjuk"
     .po-tud-hits          (max-height 340px)  - a Tudakozó találat-listája
     .szt-torzs            (max-height 420px)  - a szál egy üzenetének teljes törzse
   MARAD (szándékosan): a textarea/input natív görgetése (natív viselkedés, a user
   kivétele), minden VÍZSZINTES görgetés, és az APP-SZINTŰ .app-shell/.catalog görgető -
   az utóbbi MAGA a lap görgetője (minden nézet ezen ül), nem a lapon belüli div.
   ══════════════════════════════════════════════════════════════════════════════════════ */
.po-wiz-levelpanel-b, .po-wiz-base-b, .po-tud-hits, .szt-torzs { max-height: none; overflow: visible; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   V5/c - TÖMÖRÍTÉS (2026-08-19, user: „néha ilyen dupla sorköz jelennek meg, nagyon
   légüres a sorok - kompaktabb lehetne, hogy ne kelljen annyit görgetni").
   A mért fő okok: (1) a wizard blokk-rése 16px volt ott is, ahol a szekció-hairline már
   elválaszt; (2) több blokk a flex-gap MELLETT saját margót is vitt (8+8, 8+12 = dupla
   sorköz); (3) a visszalépő breadcrumb 390px-en HÁROM sorra tört, holott ugyanaz a
   feladó+tárgy közvetlenül alatta, a levél-panel fejlécében is ott áll.
   Blokkok közt --sp3 (12px), elemek közt marad --sp2 (8px).
   ══════════════════════════════════════════════════════════════════════════════════════ */
.po-wiz { gap: 12px; }
.po-wiz-prog { gap: 8px; }
.po-wiz-step + .po-wiz-step { padding-top: 12px; }
/* egy sorra vágott breadcrumb (a teljes szöveg a levél-panel fejlécében olvasható) */
.po-wiz-recap { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* margó + gap duplázások nullázása - a térközt EGYEDÜL a szülő gapje adja */
.po-wiz .po-tud, .po-wiz .po-scope, .po-review-ask, .po-review-fix,
.po-wiz-kinek, .po-wiz-base, .po-fullbody { margin: 0; }
.po-wiz-letter { padding: 12px; }
/* a továbbítás-panel elválasztó rése a nullázás UTÁN áll vissza (azonos specificitáson
   a későbbi szabály nyer) - ez az egyetlen hely, ahol a margó a hairline része */
.po-wiz-step > .po-fwd { margin: 8px 0 0; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   V6 - BRÍFING-SÁV + SZINKRON-STÁTUSZ + BEÉRKEZETT-FOLYAM (2026-08-19)
   A Posta FEJE eddig 8 egyenrangú vezérlőt és 3 egyforma súlyú státuszsort mutatott,
   a folyam sorai pedig soronként más x-en kezdődtek (mérve: 12 sorból 10 KÜLÖNBÖZŐ
   kivonat-kezdet, 218-285px között). Három javítás, mind a design-spec szerint:
     1) a sáv KÉT csoport (pillek balra max 5-ig, akciók jobbra 3 gombig), a többi
        segéd-gomb az „Eszközök ▾" második sorában - funkció nem veszett el;
     2) mind-zöld esetben EGY halvány szinkron-sor a három helyett (a részletek
        koppintásra, változatlan szöveggel) - hibás ág továbbra is pirosan elöl;
     3) a folyam FIX OSZLOPRÁCS (idő | feladó | státusz | kivonat | akció), .76rem,
        soronként EGY 3px-es bal éljelzővel. Belső függőleges görgető NINCS (V5/b).
   A fájl VÉGÉN áll, mert azonos specificitáson a későbbi szabály nyer.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* --- 1) BRÍFING-SÁV -------------------------------------------------------------- */
.po-brief { align-items: center; row-gap: 8px; }
.po-brief-pills { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; min-width: 0; }
.po-brief-akciok { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; margin-left: auto; }
/* a „+N" nyitó HALVÁNY, keret nélküli pill: jelzés, nem akció (S6/7 szín-törvény) */
/* padding NINCS: a .po-brief .pill alapját örökli, hogy a szomszédaival egy magas legyen */
.po-brief .pill--tobb { border: 0; background: transparent; color: var(--muted); font-family: var(--ff); font-weight: 700; cursor: pointer; }
.po-brief .pill--tobb:hover { color: var(--ink-2); background: color-mix(in srgb, var(--brand) 10%, transparent); }
/* az eszköz-sor a sáv MÁSODIK sora: hairline választja el, NEM új keret (S3) */
.po-brief-eszkozok { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
/* a nyitott „Eszközök" gomb jelöltje: TÓNUS, nem piros - az alap .btn.is-on (212. sor)
   teli piros hátteret adna, az viszont az app szín-törvénye szerint a fő akcióé. */
.po-brief .btn.is-on { background: color-mix(in srgb, var(--brand) 14%, var(--card)); border-color: var(--line-2); color: var(--ink); font-weight: 700; }

/* --- 2) ÖSSZEVONT SZINKRON-SOR ---------------------------------------------------- */
.po-wm--mind { background: transparent; border-color: color-mix(in srgb, var(--line) 70%, transparent); color: var(--muted); }
.po-wm--mind b { color: var(--ink-2); font-weight: 700; }
.po-wm--mind:hover { border-color: var(--line-2); color: var(--ink-2); }

/* --- 3) BEÉRKEZETT-FOLYAM: FIX OSZLOPRÁCS ----------------------------------------- */
/* a fejléc ugyanazon a szekciócím-mintán, mint a foldoké (S4) */
.po-feed-h { font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 12px 2px; }
.po-feed-new, .po-feed-miss { text-transform: none; letter-spacing: 0; }
/* szűrő-chipek a V1-es jelvény-alapon (tónus, keret nélkül; aktív = hot) */
.po-feed-szuro .po-scopebtn { flex: 0 0 auto; min-height: 28px; padding: 4px 12px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--ink-2); font-size: .72rem; font-weight: 700; text-align: center; }
.po-feed-szuro .po-scopebtn:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); }
.po-feed-szuro .po-scopebtn.is-on { background: var(--hot-100); color: var(--hot); box-shadow: none; }
/* A RÁCS. A bal 3px MINDIG ki van adva (átlátszón is), különben a jelölt és a jelöletlen
   sor 3px-et csúszna egymáshoz képest, és pont az oszlop-rend veszne el. */
.po-feed-row {
  display: grid;
  grid-template-columns: 88px minmax(88px, 164px) 24px minmax(0, 1fr) minmax(0, 196px);
  column-gap: 12px; row-gap: 4px; align-items: baseline;
  padding: 4px 8px; font-size: .76rem; line-height: 1.4;
  border-left: 3px solid transparent; border-radius: 4px; background: transparent;
}
.po-feed-row .fd { grid-column: 1; font-size: .72rem; }
.po-feed-row .fn { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-feed-row .fs { grid-column: 3; display: inline-flex; align-items: center; gap: 4px; }
/* a kivonat 2 sorra vágva - a teljes szöveg a title-ben és a kártyán */
.po-feed-row .fg { grid-column: 4; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.po-feed-row .btn { grid-column: 5; justify-self: start; align-self: center; }
/* EGY állapot-jelző soronként: válasz nélkül (rám vár) = piros, egyébként új = brand */
.po-feed-row.is-new { border-left-color: color-mix(in srgb, var(--brand) 55%, var(--line)); background: transparent; }
.po-feed-row.is-nyitott { border-left-color: var(--hot); background: color-mix(in srgb, var(--hot) 5%, transparent); }
.po-feed-row.is-hianyzik { border: 0; border-left: 3px solid var(--hot); background: var(--hot-100); }

/* --- MOBIL (390px): nagy célpontok, a rács három sorra bomlik ---------------------- */
@media (max-width: 720px) {
  .po-brief-pills, .po-brief-akciok { flex: 1 1 100%; margin-left: 0; }
  /* a három akció EGY sorba fér 390px-en (mérve: 306px a 358-ból), ezért auto-alap +
     növekedés - a fix 45%-os alap fölöslegesen tördelte volna külön sorba a harmadikat */
  .po-brief-akciok .btn { flex: 1 1 auto; min-height: 40px; }
  .po-brief-eszkozok .btn { flex: 1 1 45%; min-height: 40px; }
  .po-brief .pill { min-height: 32px; display: inline-flex; align-items: center; }
  .po-brief button.pill { min-height: 40px; padding: 0 12px; }
  .po-wm--mind { min-height: 40px; }
  /* a dátum-oszlop TARTALOM-SZÉLES (max-content): fix 76px-en a „08. 19. 16:54" két sorra
     tört, és soronként 19px-et vitt el fölöslegesen. Minden sor formátuma azonos, ezért
     a max-content is egy vonalba állítja a neveket. */
  .po-feed-row { grid-template-columns: max-content minmax(0, 1fr) 24px; column-gap: 8px; padding: 8px 8px; }
  .po-feed-row .fd { white-space: nowrap; }
  .po-feed-row .fd { grid-column: 1; grid-row: 1; }
  .po-feed-row .fn { grid-column: 2; grid-row: 1; }
  .po-feed-row .fs { grid-column: 3; grid-row: 1; }
  .po-feed-row .fg { grid-column: 1 / -1; grid-row: 2; }
  .po-feed-row .btn { grid-column: 1 / -1; grid-row: 3; min-height: 40px; }
  .po-feed-szuro .po-scopebtn { flex: 1 1 45%; min-height: 40px; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   V7 - POSTÁZÓ-FOLD + KIMENŐ + A MINI-SOROK EGY RÁCSA (2026-08-19)
   A csukott mini-sor eddig TÍZ (Postázó), illetve KILENC (Kimenő) egyenrangú gombot vitt
   egymás mellett - 1280px-en a sor túl is csordult (az utolsó gomb félig levágva), és
   nem lehetett ránézésre látni, mi a következő lépés. Innentől a csukott sor:
     AZONOSÍTÁS (tárgy + kinek megy + max 3 állapot-jelvény) → [Elolvasás] → EGY elsődleges
     gomb (nyers kimenőnél „Megírom a Titkárnővel" ink, egyébként „Küldés most" hot).
   A többi művelet a kinyitott olvasó-panel láblécébe költözött, BETŰRE ugyanazokkal a
   hívásokkal (a JSX-oldali kattintás-térkép a munkanaplóban). Ez a blokk a fájl VÉGÉN áll:
   azonos specificitáson a későbbi szabály nyer, tehát innen felülírhatók a fentebbi
   .po-mini szabályok anélkül, hogy azokat szét kellene szedni.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* --- 1) EGY RÁCS: FIX dátum-oszlop -------------------------------------------------- */
/* A dátum eddig TARTALOM-SZÉLES szövegdoboz volt (mérve 1280px-en: 14 / 36,4 / 69,5 px
   sorfajtánként), ezért a nevek soronként más x-en kezdődtek. Most ugyanaz a 64px-es
   (mobilon 52px) oszlop, mint a sávok `.po-datumcol`-ja, ugyanazzal a két részes alakkal:
   nap félkövéren, alatta az óra. A JSX-oldali párja a `MiniDatum`. */
.po-mini .d {
  flex: none; width: 64px; display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; text-align: right;
}
.po-mini .d b { font-size: .84rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.po-mini .d span { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* a Kimenő sor ikonja UGYANEBBEN az oszlopban áll (a kezdeményezett levélnek nincs
   bejövő dátuma - dátumot nem találunk ki, de az oszlop-rend nem törhet meg) */
.po-mini--out .d { justify-content: center; color: var(--ink-2); }

/* --- 2) EGY BAL ÉLJELZŐ, egységesen 3px --------------------------------------------- */
/* A jelentést hordozó szín marad (zöld = kész válasz, brand = ütemezett, piros = jegyzet);
   a jelöletlen sorok eddig 1px-es élen álltak, ezért 2px-et csúsztak a jelöltekhez képest. */
.po-mini { border-left-width: 3px; }
.po-mini:not(.po-mini--draft):not(.po-mini--sched):not(.po-mini--note) { border-left-color: var(--line-2); }

/* --- 3) AZONOSÍTÁS a Postázó/Kimenő sorokon ----------------------------------------- */
/* tárgy = sor-cím (.92/800, levágva), alatta/mellette a címzett-összegző (.76, ink-2).
   A `.po-mini--out` 2026-08-15-i szabálya ugyanez volt - most a Postázó is ezen a mintán
   áll, tehát a két blokk ránézésre egy rendszer. */
/* A NÉV-OSZLOP IS ZSUGORODIK (mérve 390px-en, a Lezárt foldban): a `flex: none` miatt egy
   sokcímzettes gyűjtőszál neve 2180px-re nyúlt, és a sor VÍZSZINTESEN kilógott (5 ilyen sor
   a 111-ből). Ez a rács előtti állapotban is így volt - a fix oszlopokkal viszont a levágás
   most már tényleg egy vonalban végződik. */
.po-mini .n { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-mini--draft .n { flex: 1 1 auto; min-width: 0; font-size: .92rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-mini--draft .s { flex: 0 1 auto; min-width: 0; font-size: .76rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A KÉT VEZÉRLŐ A SOR JOBB SZÉLÉN, mindig ugyanott: a rács harmadik oszlopa. A sor első
   GOMBJA (az Elolvasás/Műveletek nyitó - a jelvények span/a elemek) kapja az auto margót,
   így a gombok nem soronként más x-en úsznak a szöveg után. A nowrap azért kell, mert a
   „Küldés most" hosszú tárgy mellett két sorra tört. */
.po-mini--draft button:first-of-type { margin-left: auto; }
.po-mini .btn { white-space: nowrap; }

/* --- 4) A KINYITOTT PANEL LÁBLÉCE (ide költözött minden további művelet) ------------- */
/* hairline választja el a levél törzsétől - a panelnek TOVÁBBRA IS egy látható széle van
   (S3: kártyán belül vonal VAGY tónus, sosem új keret) */
.po-readbody-f { padding: 8px 12px 12px; margin-top: 8px; border-top: 1px solid var(--line); }

/* --- MOBIL (390px): ugyanaz a rács, ujjbegy-méretű vezérlőkkel ---------------------- */
@media (max-width: 720px) {
  /* A DÁTUM KILÉP A FLEX-SORBÓL. A `.po-mini` mobilon tördel, és a tördelés a ZSUGORÍTÁS
     ELŐTT történik, ezért a hosszú tárgy MINDIG új sorba ugrott - a dátum egyedül maradt az
     első soron (mérve: soronként +19px üresjárat). Abszolút bal oszlopként a dátum a helyén
     marad, a tartalom pedig a jobb hasábban tördel, tehát a becsomagolt sorok is a
     rács második oszlopában kezdődnek. */
  /* 12px bal padding + 52px dátum-oszlop + 8px rés = 72px (a rés nélkül a dátum és a név
     összeért - mérve: „08. 19."Stekler Bendegúz) */
  .po-mini { position: relative; padding-left: 72px; min-height: 52px; }
  .po-mini .d { position: absolute; left: 12px; top: 8px; width: 52px; }
  /* a dátum-oszlop NÉLKÜLI mini-sor (a jóváhagyó kör fejléce) a szokásos paddinggel áll */
  .po-mini--fej { padding-left: 12px; }
  /* a tárgy/címzett-sor TELJES sort kap: zsugorodva „R…"-ig fogyott (mérve), pedig épp ez
     az azonosítás - a flexbox előbb zsugorít, mint hogy új sorba tenné */
  .po-mini .s { flex: 1 1 100%; }
  .po-mini .d b { font-size: .76rem; }
  /* a csukott soron már csak KÉT gomb van, tehát elférnek 40px-es célpontként */
  .po-mini .btn { min-height: 40px; padding: 4px 12px; }
  .po-readbody-f .btn { min-height: 40px; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   F3 - PROAKTÍV ADAT-FELAJÁNLÁS a Titkárnő 2/3 lépésén (2026-08-20)
   A sáv akkor jelenik meg, ha a FELADÓ kér adatot Árontól („Kéri Pali programjának
   leírását"): egy mondat + két gomb. SZÁNDÉKOSAN HALK - nem rám-váró állapot, hanem
   felajánlás, ezért PIROS NINCS rajta (szín-törvény: a piros a „rám vár"/fő akcióé).
   S3 (keret-fegyelem): a sávnak nincs saját teljes kerete a szekción belül, csak
   paper-2 tónus + 3px-es SZERKEZETI (--line) bal él - a fő akció a szekció alján
   álló „Most megfogalmazom" marad. A térközök a 4/8/12-es skáláról, a betűfokok a
   6 fokú létráról (.68 szekciócím, .84 törzs).
   ══════════════════════════════════════════════════════════════════════════════════════ */
.po-ajanlat {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border-radius: 8px;
  background: var(--paper-2);
  border-left: 3px solid color-mix(in srgb, var(--ink-2) 45%, transparent);
}
.po-ajanlat-b { font-size: .84rem; line-height: 1.55; color: var(--ink); }
/* a KÉSZ visszajelzés pipája zöld (a jelvény-rendszer KÉSZ-családja); a méretet a globális
   `svg.lucide` szabály adja, itt csak a jelentést hordozó szín és a 4px-es rés áll */
.po-ajanlat-b svg { margin-right: 4px; color: var(--g0); }

/* ══════════════════════════════════════════════════════════════════════════════════════
   KÉRDEZŐ - bárhonnan elérhető kérdés-válasz panel (4. kör, K1: a UI váza, 2026-08-20)
   ──────────────────────────────────────────────────────────────────────────────────────
   FAB-POZÍCIÓ - JOBB ALSÓ GOMB-OSZLOP (user-döntés, 2026-08-20): a jobb alsó sarokban
   már két lebegő elem áll, most fölébük kerül a harmadik. A rend alulról felfelé:
     .savedock       right 14 · bottom 14+safe · mobilon 46px-es hamburger  (z 60)
     .ag-fab „+"     right 14 · bottom 72+safe · 52px · CSAK <=720px és CSAK a
                     Feladatok/Események nézetben                            (z 55)
     .kerdezo-fab    right 14 · bottom 136+safe · 52px · MINDEN méreten és nézetben
   A 136 nem beégetett szám, hanem a lánc összege: 72 (az ag-fab alja) + 52 (a magassága)
   + --sp3 (12px rés, ugyanaz, mint a savedock és az ag-fab között: 72 - (14+46) = 12).
   A magasság MINDEN nézetben AZONOS, akkor is, ha az adott nézetben nincs „+": egy
   helyben maradó gomb kiszámítható, egy nézetváltáskor 64px-et ugráló gomb nem az.
   Asztalon nincs ag-fab, ott a savedock (14..~52) alatta bőven elfér.
   TOASTOK: a .po-undotoast (bottom 18, magasság ~50px) a 18..68-as sávban ül, tehát
   a gomb-oszlop fölötte kezdődik - nem takarja. A .toaststack mobilon teljes szélességű
   és a 80-as magasságtól felfelé nő, z-index 95: átfedésben a toast fest FELÜL (ez az
   .ag-fab mai viselkedése is), de a toastok ✕-e a jobb szélen, a szövegük balra van,
   és a toast elmúltával a gomb-oszlop maradéktalanul visszatér.
   Z-INDEX 58: a scrimek (70/76/78/80) FÖLÉ sosem kerül, tehát nyitott fiók, Posta-panel
   vagy modál alatt magától eltűnik. Az .ag-fab (55) és a .savedock (60) más magasságban
   ül, tehát a sorrendjük itt nem számít.
   A .ag-fab szabályaihoz ez a blokk nem nyúl - saját osztály, saját szabályok.
   PANEL-MINTA: a posta-hub fly-in (bal oldali beúszó panel) és NEM a .ovl / .modal
   (jobb oldali), két okból: (1) a panel MINDIG mountolva marad, csak a display vált -
   pont ez a posta-hub mintája, a .ovl-t az app mindenhol feltételesen rendereli;
   (2) a jobb oldali élt a .drawer / .modal család (kártya-részletező, szerkesztők, és
   a Titkárnő-varázsló) foglalja - a Kérdezőből épp a Titkárnőnek adunk át (K6), tehát
   a kettő ne ugyanazon az élen verekedjen. Mobilon alulról feljövő sheet.
   GÖRGETÉS: a panelnek EGYETLEN görgető felülete van (.kerdezo-torzs); a fejléc és a
   beviteli lábléc rögzített, a beszélgetés-listának nincs saját max-height-ja.
   KERET-FEGYELEM (S3): a panelnek EGY széle van (asztalon a jobb, mobilon a felső);
   belül minden blokk tónussal + 3px-es bal éllel válik el, teljes keret nélkül.
   ══════════════════════════════════════════════════════════════════════════════════════ */
.kerdezo-fab {
  position: fixed; right: 14px; bottom: calc(72px + 52px + var(--sp3) + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: var(--hot); color: #fff; font-size: 1.5rem; line-height: 1;
  z-index: 58; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); cursor: pointer;
}
.kerdezo-fab:hover { background: color-mix(in srgb, var(--hot) 86%, #000); }
/* vendég-kulcsnál nincs Kérdező (a .ag-fab mintája) */
.viewer .kerdezo-fab { display: none !important; }

.kerdezo-scrim { position: fixed; inset: 0; background: rgba(21, 23, 26, .42); z-index: 78; animation: scrimIn .22s ease both; }
.kerdezo {
  position: fixed; left: 0; top: 0; bottom: 0; width: min(560px, 100vw); z-index: 79;
  flex-direction: column; overflow: hidden;
  background: var(--paper); border-right: 1px solid var(--line);
  box-shadow: 16px 0 50px rgba(16, 17, 20, .22);
}
/* az animáció az OSZTÁLYON ül, nem az elemen: a panel mindig mountolva marad, így
   csak az osztály le- és visszakerülése tudja újraindítani a beúszást */
.kerdezo--on { animation: kerdezoBe .24s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes kerdezoBe { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }

.kerdezo-fej {
  flex: none; display: flex; align-items: center; gap: var(--sp2);
  padding: var(--sp3) var(--sp4); border-bottom: 1px solid var(--line); background: var(--card);
}
.kerdezo-h {
  flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.kerdezo-fej .btn { flex: none; min-height: 40px; }
.kerdezo-x { padding: 8px 10px; }

.kerdezo-torzs {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp4); display: flex; flex-direction: column; gap: var(--sp5);
}
.kerdezo-ures { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--ink-2); }
.kerdezo-kor { display: flex; flex-direction: column; gap: var(--sp3); }

/* A KÉRDÉS AZ ENYÉM: piros bal él + piros „KÉRDÉS" felirat (2026-08-22, user-kérés: „a
   kérdés legyen piros, én tettem fel; vagy a kérdés-válasz között legyen elválasztás").
   A SZÖVEG maga NEM piros - az olvashatóságot rontaná, és az appban a piros a „rám vár"
   jelentést viseli; a jelzősáv és a felirat viszont pont ezt a „tőlem való" jelentést adja.
   Mellé a válasz ELVÁLASZTÁSA is megvan (l. `.kerdezo-valasz` felső vonala). */
.kerdezo-kerdes {
  padding: var(--sp3); border-radius: 8px; background: var(--paper-2);
  border-left: 3px solid var(--hot);
  font-size: .84rem; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere;
}
.kerdezo-kq { display: block; margin-bottom: var(--sp1); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hot); }
/* VÁRAKOZÁS (2026-08-22): a néma „Keresem…" nem volt megkülönböztethető a beragadástól -
   most lüktető pont + másodperc-számláló, és 75 mp fölött egy mondat arról, MIÉRT tart. */
.kerdezo-var { margin: 0; font-size: .76rem; font-weight: 500; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp2); }
.kerdezo-var-pont { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; animation: kerdezoLuktet 1.1s ease-in-out infinite; }
@keyframes kerdezoLuktet { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .kerdezo-var-pont { animation: none; opacity: .7; } }
.kerdezo-var-magy { flex: 1 1 100%; font-size: .72rem; font-weight: 500; color: var(--muted); line-height: 1.5; }

/* a VÁLASZ: sima törzs-szöveg, keret és háttér nélkül */
.kerdezo-valasz { display: flex; flex-direction: column; gap: var(--sp3); }
/* tömörebb sorköz a chat-válaszban (2026-08-22 user-kérés: „nem kell ekkora sortávolság") */
.kerdezo-valasz .richszoveg { font-size: .86rem; line-height: 1.45; }
/* a `:not(:has(...))` KELL: e nélkül ez a KÉSŐBBI szabály felülírta az adatlap-fejléc
   margóját (azonos specificitás, későbbi nyer), és 6px hézag nyílt a fejléc és a rács
   között - a kártya kettétört. Mérve 2026-08-22. */
.kerdezo-valasz .richszoveg p:not(:has(+ .rsz-adatok)) { margin-bottom: .35em; }
/* ELVÁLASZTÁS a kérdés és a válasz között (a user a piros kérdés MELLETT ezt is kérte):
   halvány vonal a válasz tetején, hogy a két rész ne folyjon egybe a görgetésben */
.kerdezo-valasz { border-top: 1px solid var(--line); padding-top: var(--sp3); }
/* négy művelet-gomb (két másolás, két Titkárnő) - mobilon két sorba tördelve fér el */
.kerdezo-akciok .btn { font-size: .78rem; padding: 8px 10px; }
.kerdezo-akciok { display: flex; flex-wrap: wrap; gap: var(--sp2); }
.kerdezo-akciok .btn { min-height: 40px; }
.kerdezo-titkar:disabled { opacity: .45; cursor: not-allowed; }

/* SZINONIMA-HÍD (K8): a második, hivatalos szóhasználatú keresés HALK nyoma a FORRÁSOK
   szekció felett - nem figyelmeztetés, csak tanítás (a betű-létra .76-os foka). */
.kerdezo-ujrakeres { margin: 0; font-size: .76rem; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }

/* KI FOGALMAZTA (2026-08-21) - halk, egy soros jelzés a válasz alatt. A chat alapból az
   olcsóbb kategórián fut, ezért látnia kell a felhasználónak, mit olvas. SEMLEGES tónus,
   NEM piros: az az appban a „rám vár" jelentést viseli. A betűfok a .76-os hint-lépcső. */
.kerdezo-modell { margin: 0; font-size: .72rem; line-height: 1.5; color: var(--muted); }
/* az „Opusszal újra" gomb a drágább utat kínálja, ezért NEM elsődleges (nincs btn--ink):
   körvonalas, halk - a fő út az olcsó válasz elfogadása marad. */
.kerdezo-opus { color: var(--ink-2); }
/* ÚJRA KUTATÓVAL (2026-08-22 este): ugyanaz a súly, mint az „Újra: erősebb fokozat" gombé -
   mindkettő UGYANAZT a kérdést futtatja újra, csak más úton. Nem elsődleges gomb: a válasz
   már megvan, ez csak felajánlás. */
.kerdezo-kutato { font-size: calc(0.84rem * var(--md-fskala, 1)); }

.kerdezo-forrasblokk { display: flex; flex-direction: column; gap: var(--sp2); }
.kerdezo-sech { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kerdezo-forrasok { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp2); }
/* ÖSSZECSUKHATÓ FORRÁS-FEJLÉC (2026-08-22): a fejléc MAGA a koppintó-célpont, teljes
   szélességben és 40px magasan - a pici nyíl önmagában mobilon eltalálhatatlan lenne. */
.kerdezo-sech--nyit {
  display: flex; align-items: center; gap: var(--sp2); width: 100%; min-height: 40px;
  padding: 0; margin: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--ff); text-align: left; color: var(--muted);
}
.kerdezo-sech--nyit:hover { color: var(--ink-2); }
.kerdezo-nyil { display: inline-block; font-size: .9rem; line-height: 1; transition: transform .15s ease; }
.kerdezo-nyil--le { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .kerdezo-nyil { transition: none; } }

.kerdezo-forras {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp1);
  padding: var(--sp3); border-radius: 8px; background: var(--card);
  border-left: 3px solid var(--csalad, var(--line-2));
}
/* FORRÁS-CSALÁD SZÍNEK (2026-08-22, user-kérés: „mobil darkon jó lenne színeket is").
   A szín az adat EREDETÉT kódolja (szabályzat / ember / naptár / levél / képzés / külső),
   nem dekoráció. A --hot (piros) szándékosan kimarad: az a „rám vár" jelentés. */
.kerdezo-forras--szabaly { --csalad: #b7791f; }
.kerdezo-forras--ember   { --csalad: #2b6cb0; }
.kerdezo-forras--ido     { --csalad: #2f855a; }
.kerdezo-forras--level   { --csalad: #6b46c1; }
.kerdezo-forras--kepzes  { --csalad: #2c7a7b; }
.kerdezo-forras--kulso   { --csalad: #718096; }
.kerdezo-forras .kerdezo-fcimke { color: var(--csalad, var(--ink-2)); }
/* SÖTÉT TÉMÁN VILÁGOSABB TÓNUS (a --en barnájának bevált mintája): a fenti, világos
   háttérre hangolt árnyalatok #17181b-n olvashatatlanul besötétednének. A user
   kifejezetten a mobil dark nézetre kérte a színeket, tehát ez az ELSŐDLEGES eset. */
html[data-theme='dark'] .kerdezo-forras--szabaly { --csalad: #e0a83c; }
html[data-theme='dark'] .kerdezo-forras--ember   { --csalad: #6aa6f0; }
html[data-theme='dark'] .kerdezo-forras--ido     { --csalad: #45c98d; }
html[data-theme='dark'] .kerdezo-forras--level   { --csalad: #b083f5; }
html[data-theme='dark'] .kerdezo-forras--kepzes  { --csalad: #4cc4e0; }
html[data-theme='dark'] .kerdezo-forras--kulso   { --csalad: #9aa0aa; }

.kerdezo-ffej { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp2); }
/* a sorszám a válasz [1]/[2] hivatkozásaival egyezik - ez köti össze a kettőt */
.kerdezo-fsorszam { font-size: .72rem; font-weight: 800; color: var(--csalad, var(--muted)); font-variant-numeric: tabular-nums; }
.kerdezo-fcimke { font-size: .72rem; font-weight: 700; color: var(--ink-2); }
/* MELYIK KERESŐ HOZTA (2026-08-20, hibrid réteg): halk, semleges jelvény a forrás-címke
   mellett - „kulcsszó" / „jelentés" / „mindkettő". SZÁNDÉKOSAN nem --hot és nem g0: nem
   állapot, hanem eredet-jelölés; a piros az appban a „rám vár" jelentést viseli.
   A „mindkettő" annyival erősebb, hogy tömör hátteret kap (mindkét kereső megtalálta). */
.kerdezo-fmotor {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent; white-space: nowrap;
}
.kerdezo-fmotor--mindketto { color: var(--ink-2); background: color-mix(in srgb, var(--brand) 10%, transparent); border-color: transparent; }
/* HATÁLYOSSÁG-JELVÉNY (2026-09-05): a forrás-tételen látszik, hogy a szabályzat-kiadás hatályos-e.
   A hatálytalan ÁTHÚZVA és szaggatott kerettel - nem piros: a --hot az appban a „rám vár" jele. */
.kerdezo-fhatalyos {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-2); padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent; background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.kerdezo-fhatalyos--hatalytalan { color: var(--muted); background: transparent; border: 1px dashed var(--line-2); text-decoration: line-through; }
.kerdezo-fhatalyos--jovobeli { color: var(--muted); background: transparent; border: 1px dotted var(--line-2); }
.kerdezo-fcim { font-size: .84rem; font-weight: 800; line-height: 1.35; color: var(--ink); }
.kerdezo-freszlet, .kerdezo-furl { font-size: .84rem; font-weight: 400; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.kerdezo-forras .btn { margin-top: var(--sp1); min-height: 40px; }
/* tételenkénti gombsor (K6: Másol + Titkárnőnek). A margót a SOR viszi, nem a gombok -
   különben a törésnél a második sor gombjai külön margót kapnának. A szabály a
   `.kerdezo-forras .btn` UTÁN áll: azonos specificitáson a későbbi nyer. */
.kerdezo-fakciok { display: flex; flex-wrap: wrap; gap: var(--sp2); margin-top: var(--sp1); }
.kerdezo-fakciok .btn { margin-top: 0; }

/* FORRÁS-FELAJÁNLÓ SÁV (K2): ha az appban kevés/semmi nem volt meg, a válasz alatt
   három, EGYENKÉNT kipipálható külső forrás áll (0-3 pipálható). Külső keresés MAGÁTÓL
   SOHA nem indul (user-törvény), ezért van itt gomb és nem automatizmus.
   A hangja HALK: semleges tónus + 3px bal él (nem --hot; ez nem figyelmeztetés, hanem
   felajánlás). A sor-magasság 40px, hogy érintőn is biztosan eltalálható legyen. */
.kerdezo-ajanlat {
  display: flex; flex-direction: column; gap: var(--sp2);
  padding: var(--sp3); border-radius: 8px; background: var(--paper-2);
  border-left: 3px solid var(--line-2);
}
.kerdezo-ajanlat-b { margin: 0; font-size: .76rem; line-height: 1.55; color: var(--ink-2); }
.kerdezo-pipak { display: flex; flex-direction: column; gap: var(--sp1); }
.kerdezo-pipa {
  display: flex; align-items: center; gap: var(--sp2); min-height: 40px;
  font-size: .84rem; line-height: 1.35; color: var(--ink); cursor: pointer;
}
.kerdezo-pipa input { flex: none; width: 18px; height: 18px; accent-color: var(--hot); cursor: pointer; }
.kerdezo-ajanlat .btn:disabled { opacity: .45; cursor: not-allowed; }

.kerdezo-lab {
  flex: none; display: flex; flex-direction: column; gap: var(--sp2);
  padding: var(--sp3) var(--sp4) calc(var(--sp3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--card);
}
.kerdezo-lab textarea {
  width: 100%; min-width: 0; min-height: 64px; box-sizing: border-box;
  font-family: var(--ff); font-size: .84rem; line-height: 1.55;
  padding: var(--sp2) var(--sp3); border-radius: 8px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink);
}
.kerdezo-lab textarea:focus { outline: 2px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: 1px; border-color: var(--brand); background: var(--card); }
.kerdezo-lab-sor { display: flex; align-items: center; gap: var(--sp2); }
.kerdezo-hint { flex: 1 1 auto; min-width: 0; font-size: .76rem; font-weight: 500; color: var(--ink-2); }
.kerdezo-lab-sor .btn { flex: none; min-height: 40px; }
/* fokozat-választó (2026-08-21 este): nagy koppintó-célpont, nem törhet ki 390px-en */
/* a címke a mért időt is viszi („Opus·Max ~15 mp"), ezért szélesebb, mint egy puszta név */
.kerdezo-fokozat { flex: none; min-height: 40px; max-width: 190px; }
/* ÚT-VÁLASZTÓ a fokozat mellett (2026-08-22 este). MOBIL: két választó + gomb egy sorban
   390px-en nem fér el, ezért mindkettő zsugorodhat (`min-width: 0`) és a sor törhet -
   a `mobil-nagy-celpont` szabály szerint a 40px-es koppintási magasság marad. */
.kerdezo-ut { flex: none; min-height: 40px; max-width: 190px; }
@media (max-width: 720px) {
  .kerdezo-lab-sor { flex-wrap: wrap; }
  .kerdezo-ut, .kerdezo-fokozat { flex: 1 1 46%; min-width: 0; max-width: none; }
  .kerdezo-lab-sor .kerdezo-hint { display: none; }
}

@media (max-width: 720px) {
  /* mobilon alulról feljövő sheet: a panel EGY széle a felső */
  .kerdezo {
    left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: 92dvh;
    border-right: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0;
    box-shadow: 0 -16px 50px rgba(16, 17, 20, .22);
  }
  .kerdezo--on { animation: kerdezoFel .26s cubic-bezier(.2, .8, .25, 1) both; }
  @keyframes kerdezoFel { from { transform: translateY(36px); opacity: .5; } to { transform: none; opacity: 1; } }
  .kerdezo-fej, .kerdezo-torzs, .kerdezo-lab { padding-left: var(--sp3); padding-right: var(--sp3); }
  /* iOS: 16px alatt a mező fókuszra ránagyítaná az oldalt (a .field input mintája) */
  .kerdezo-lab textarea { font-size: max(16px, calc(16px * var(--md-fskala, 1))); }
  /* a Ctrl+Enter-tipp mobilon értelmetlen, a hely a fokozat-választóé + a gombé.
     A tipp adta a rugalmas térkitöltést, ezért a küldés-gombot magunk toljuk jobbra -
     különben a sor közepén lógna (390px-en mérve). */
  .kerdezo-hint { display: none; }
  .kerdezo-lab-sor .btn--ink { margin-left: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   ÖSSZEGZÉS-EMLÉKEZTETŐ a Titkárnő 2/3 lépésén (2026-08-21, user-kérés: „amikor diktálom
   vagy írom a válasz szöveget, néha elfelejtem, mi is volt az összegzés szövege").
   A diktáló-mező (.po-dict) ALATT áll, lenyitható foldban, számozott pontokkal.
   A designrendszer szerint: TÓNUS, keret nélkül (a szekció hairline-ja már elválaszt),
   .68-as nagybetűs fold-felirat (a .po-regitervek / .po-wiz-tpl summary-k fokja), a pontok
   a .84-es törzs-fokon. Bal éljelzőt SZÁNDÉKOSAN nem visel: a fölötte álló .po-ajanlat
   sávnak van, és blokkonként egy éljelző a szabály. Belső görgetés nincs (a lap görget).
   ══════════════════════════════════════════════════════════════════════════════════════ */
.po-emlek { border-radius: 8px; background: var(--paper-2); padding: 0 var(--sp3); }
.po-emlek > summary {
  display: flex; align-items: center; gap: 6px; min-height: 40px;
  cursor: pointer; user-select: none; list-style: none;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.po-emlek > summary::-webkit-details-marker { display: none; }
/* saját nyíl-jelölő: nyitva lefelé fordul (a natív marker rejtve, mert a flex-sorban
   soronként más x-re esne) */
.po-emlek > summary::before { content: '▸'; font-size: .8rem; letter-spacing: 0; }
.po-emlek[open] > summary::before { content: '▾'; }
.po-emlek > summary:hover { color: var(--ink-2); }
/* CSAPDA: a lista NEM lehet flex-konténer. A flex-item elveszíti a `list-item` display-t,
   és vele a `::marker`-t - vagyis pont a SORSZÁM tűnne el, ami a user kérésének a lényege
   („1. 2. 3... pontokba szedett emlékeztető"). A sorok közét ezért margó adja, nem gap. */
.po-emlek-l { margin: 0 0 var(--sp3); padding: 0 0 0 22px; list-style-type: decimal; }
.po-emlek-l li { display: list-item; margin-top: var(--sp2); font-size: .84rem; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.po-emlek-l li::marker { font-weight: 800; color: var(--muted); }
/* a címkés pontok („határidő", „adatot kérnek") - a címke a szekciócímke fokán, halkan */
.po-emlek-l .c {
  margin-right: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}

/* ── Címzett-választó összecsukható preset-sorai (2026-08-23, user: „ezek a preset nagy
   gombok nagyon sok helyet foglalnak") ─────────────────────────────────────────────────
   A nyitó gomb TELJES szélességű, 40px magas célpont (mobil-szabály), és csukva is kiírja,
   mi van mögötte (aktív kör / aktív szűrő) - néma állapot nem maradhat. */
.rp-fold { margin: 6px 0; }
.rp-foldbtn {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); font-family: var(--ff);
  font-size: .84rem; font-weight: 700; text-align: left; cursor: pointer;
}
.rp-foldbtn:hover { border-color: var(--brand); }
.rp-foldbtn.is-on { border-color: var(--hot); color: var(--hot); }
.rp-foldbody { margin-top: 6px; }
/* a két nyitógomb egy sorban (user-kérés): 390px-en fele-fele, kisebb kijelzőn törik */
.rp-foldsor { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.rp-foldsor .rp-foldbtn { flex: 1 1 150px; width: auto; }

/* ── Időpont küldése: olvasható mező-hierarchia (2026-08-23, user: „a design nagyon ronda,
   nehezen átlátható") ────────────────────────────────────────────────────────────────────
   A magyarázatok a NAGYBETŰS címkében ültek, 2-3 sorban - hangsúlyosabbak voltak, mint a
   mező tartalma. Ma a címke EGY rövid sor, a magyarázat halk alcím alatta. */
.modal--idopont .f > .field.full > label { font-size: .7rem; color: var(--ink-2); }
.ip-sub { margin: -2px 0 2px; font-size: .74rem; line-height: 1.45; color: var(--muted); }
.modal--idopont .ip-note { font-size: .76rem; color: var(--muted); }
/* SZEKCIÓ-FEJLÉC az Időpont küldése űrlapon (2026-08-23, user: „színtelen szürke, rosszul
   áttekinthető"): számozott korong + színes aláhúzás, a Titkárnő-wizard szekcióinak mintájára.
   A három szín TAGOL (mi/kinek · a találkozó · a levél), nem díszít - és egyik sem a --hot
   piros, mert az az appban a „rám vár" jelentést viseli. */
.modal--idopont .f > .ip-sec {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  margin: 8px 0 2px; padding-bottom: 7px; border-bottom: 2px solid var(--ip-szin);
  font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); line-height: 1.2;
}
.modal--idopont .f > .ip-sec:first-child { margin-top: 0; }
.ip-secno {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px;
  border-radius: 999px; background: var(--ip-szin); color: #fff;
  font-size: .72rem; font-weight: 800; letter-spacing: 0;
}
.ip-sec--1 { --ip-szin: var(--g1); }   /* kék - miről és kinek */
.ip-sec--2 { --ip-szin: var(--g0); }   /* zöld - a találkozó */
.ip-sec--3 { --ip-szin: var(--g2); }   /* lila - a levél */
/* Időpont-sor: a nap és az óra-pár külön tördelési egység (390px-en a négy mező nem fér egy
   sorba, és a kötőjeles "vége" mező egyedül csúszott át a következő sorba) */
.ms-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ms-row .ms-num { flex: none; width: 62px; font-size: .8rem; color: var(--muted); }
.ms-row .ms-nap { font: inherit; }
.ms-ido { display: flex; align-items: center; gap: 6px; flex: 1 1 240px; min-width: 0; }
.ms-ido input { font: inherit; }
/* a chipek nem törhetnek ketté a sor végén ("+ email" két sorba esett) */
.nm-row .chip { white-space: nowrap; }

/* A SÁV BELSŐ RENDJE A BAL OLDALI ÓRA-OSZLOPBAN (2026-08-23, 3. user-pontosítás: a
   kártyára tett blokk olvashatatlan volt és felesleges - minden sávban ugyanaz a rend,
   ezért a TENGELY mutatja, kártyánként nem ismételjük). zöld = előadás, VILÁGOS rácsozott
   sötét szöveggel = kérdés-válasz (a sűrű zöld rácson a fehér szöveg olvashatatlan volt),
   halvány = szünet. A napi listán (nincs tengely) egy halk szöveg-sor: .phv-szerk-txt. */
.phv-table .phv-th-time, .phv-table .phv-td-time { width: 106px; }
.phv-tdr { display: block; margin: 3px 0 0; padding: 3px 4px; border-radius: 5px; font-size: .6rem; font-weight: 700; line-height: 1.3; white-space: normal; text-align: center; }
.phv-tdr em { display: block; font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
/* 2026-08-24 user-kérés: a tengely NE legyen zöld (a szabad sáv zöldje és az MA korábbi
   zöldje mellett „minden zöld" volt) - előadás: halvány sárga, kérdés-válasz: ugyanannak a
   sárgának a rácsozata. A sárga alap sötét szöveget kér (fehér olvashatatlan rajta). */
.phv-tdr-ea { background: color-mix(in srgb, #e3b341 34%, var(--card)); color: var(--ink); border: 1px solid color-mix(in srgb, #e3b341 55%, transparent); margin-top: 6px; }
.phv-tdr-kv { background: repeating-linear-gradient(45deg, color-mix(in srgb, #e3b341 26%, transparent) 0 6px, color-mix(in srgb, #e3b341 8%, transparent) 6px 12px); color: var(--ink); border: 1px dashed color-mix(in srgb, #e3b341 60%, transparent); }
.phv-tdr-szun { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--muted); font-weight: 600; }
html[data-theme='dark'] .phv-tdr-szun { background: rgba(255, 255, 255, .09); }
.phv-szerk-txt { margin: 2px 0 4px; font-size: .76rem; color: var(--muted); }
.phv-f--hint { font-size: .74rem; color: var(--muted); align-self: end; flex: 1 1 220px; }

/* ============================================================
   TEMATIKA-FRISSITES (2026-08-29): IRODALOM a reszletezoben +
   „varhato oktato" jelzes a kartyakon.

   Szin-szabaly: egyik jelzes SEM piros - a --hot az appban a „ram var"
   jelentest viseli. A „varhato" halk, szaggatott keretes (a szaggatott
   keret maga mondja, hogy nem vegleges), a forras-jelveny semleges.
   Meret: rem-alapu, igy a betumeret-skala (--md-fskala) magatol viszi.
   ============================================================ */
.cc-varhato,
.cn-varhato {
  margin-left: 6px;
  display: inline-block;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted);
  padding: 1px 6px;
  border: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent);
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
}
.cn-varhato { font-size: .6rem; }

.cc-irod,
.cn-irod {
  flex: none;
  font-size: .66rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.cn-irod { font-size: .62rem; }

/* Irodalom-blokk a reszletezoben. A tanmenet (.dr-alk-*) mintajat koveti,
   hogy a ket „a leadott tematikabol" blokk egy nyelvet beszeljen. */
.dr-irod-cs { margin-top: 10px; }
.dr-irod-h {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 2px;
}
.dr-irod-list { margin: 0; padding: 0; list-style: none; }
.dr-irod-list li {
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere; /* hosszu cim/URL nem feszitheti szet a sávot mobilon */
}
.dr-irod-list li:first-child { border-top: none; }
.dr-irod-a {
  margin-left: 4px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--brand-text);
  text-decoration: none;
  white-space: nowrap;
}
.dr-irod-a:hover { text-decoration: underline; }

.dr-varhato {
  margin-top: 4px;
  font-size: .74rem;
  color: var(--muted);
  padding: 5px 9px;
  border: 1px dashed color-mix(in srgb, var(--muted) 40%, transparent);
  border-radius: 8px;
}

/* ============================================================
   FOGALMAZO-FOKOZATOK (2026-08-29): harom gomb a Titkarno akciosoraban.
   A gombnyomas MAGA a dontes - nincs tarolt beallitas, amit el lehetne felejteni.
   A kiemelt (btn--ink) gomb a diktalasbol szamolt JAVASLAT, nem kenyszer.

   Szin: a kiemelest a megl. `btn--ink` adja (fekete), NEM a --hot piros - az az
   appban a „ram var" jelentest viseli. Terkoz a --sp skalarol, betu a letrarol.
   ============================================================ */
.po-fokok {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp1, 4px);
  min-width: 0;
}
.po-fok {
  flex: 1 1 auto;
  min-width: 108px;
  justify-content: center;
  gap: 5px;
  font-size: .76rem;
  white-space: nowrap;
}
.po-fok-i { font-size: .84rem; line-height: 1; }
@media (max-width: 720px) {
  /* mobilon a harom gomb egy sorban tul keskeny lenne az olvashato felirathoz;
     a wrap intezi, de a koppintasi felulet marad nagy (mobil-nagy-celpont szabaly) */
  .po-fok { min-height: 40px; flex: 1 1 46%; }
}