/* Personal OS shell and page layer. Loaded last; every value comes from theme.css tokens.
   Three levels of emphasis: primary (what to do now), secondary (what is next / needs attention), tertiary (background). */

/* ---------- Base ---------- */
body { background: var(--c-bg); color: var(--c-text); font-family: var(--font); font-size: 16px; line-height: var(--lh-body); }
h1 { font-size: var(--fs-2xl); letter-spacing: -.02em; font-weight: 650; line-height: var(--lh-tight); margin: 0 0 var(--s-2); }
h2 { font-size: var(--fs-lg); font-weight: 650; line-height: var(--lh-tight); }
h3 { font-size: var(--fs-md); font-weight: 600; }
p { color: var(--c-text-2); }
.muted, small { color: var(--c-muted); }
a { color: var(--c-accent-text); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skiplink { position: absolute; left: var(--s-4); top: -60px; z-index: 100; background: var(--c-accent); color: var(--c-on-accent); padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); }
.skiplink:focus { top: var(--s-3); }
main:focus { outline: none; }

/* ---------- Controls ---------- */
button { min-height: 36px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-text); font-weight: 600; font-size: var(--fs-sm); padding: 8px 14px; transition: background .12s, border-color .12s, color .12s; }
button:hover { background: var(--c-surface-2); border-color: var(--c-border-strong); }
button:active { transform: none; }
button.primary, .primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
button.primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); color: var(--c-on-accent); }
button.text, .text { background: transparent; border-color: transparent; color: var(--c-accent-text); padding-left: var(--s-2); padding-right: var(--s-2); }
button.text:hover { background: var(--c-accent-soft); border-color: transparent; }
button.quiet { background: transparent; }
button.small { min-height: 32px; padding: 5px 11px; font-size: var(--fs-xs); }
button.iconbutton { min-width: 36px; padding: 6px 8px; border-color: transparent; background: transparent; }
button.selected { background: var(--c-accent-soft); border-color: transparent; color: var(--c-accent-text); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; box-shadow: none; }
input, select, textarea { border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-text); min-height: 38px; }
input:focus, select:focus, textarea:focus { border-color: var(--c-focus); box-shadow: var(--focus-ring); }
kbd { font: inherit; font-size: var(--fs-xs); color: var(--c-muted); background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 4px; padding: 1px 6px; }
.chip { background: var(--c-surface-2); color: var(--c-text-2); border: 1px solid var(--c-border); border-radius: var(--r-pill); padding: 2px 9px; font-size: var(--fs-xs); font-weight: 500; }
.chip.amber { background: var(--c-warning-soft); color: var(--c-warning); border-color: transparent; }
.eyebrow { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--c-muted); }
.panel { border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: none; background: var(--c-surface); padding: var(--s-5); }
.notice { background: var(--c-warning-soft); color: var(--c-warning); border: 0; border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.error { background: var(--c-danger-soft); color: var(--c-danger); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.empty { padding: var(--s-10) var(--s-5); }
.empty > span { background: var(--c-accent-soft); color: var(--c-accent-text); }
.quiet-note { color: var(--c-muted); font-size: var(--fs-sm); margin: var(--s-2) 0; }
.section-label { font-size: var(--fs-xs); letter-spacing: .07em; text-transform: uppercase; font-weight: 650; color: var(--c-muted); margin: 0 0 var(--s-3); }

/* ---------- Shell ---------- */
.sidebar { width: 232px; padding: var(--s-5) var(--s-3) var(--s-4); background: var(--c-nav-bg); border-right: 1px solid var(--c-nav-border); color: var(--c-nav-text); }
/* Márka az oldalsávban: a teljes Orczy-logó (sötétkéken a fehér változat), alatta a termék neve; szűk sávban csak az ikon. */
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 var(--s-2); color: var(--c-nav-text); text-decoration: none; }
.brand .brandlogo { width: 150px; height: auto; display: block; }
.brand .logo-white { display: none; }
[data-palette='orczy'] .brand .logo-white { display: block; }
[data-palette='orczy'] .brand .logo-color { display: none; }
.brand .brandmark-img { width: 34px; height: 34px; display: none; }
.brandsub { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-nav-text-2); }
.brandmark { width: 32px; height: 32px; border-radius: 9px; font-size: 1.25rem; background: var(--c-accent); color: var(--c-on-accent); }
.capture-main { position: static; margin: var(--s-6) 0 var(--s-5); width: 100%; display: flex; align-items: center; gap: var(--s-2); justify-content: flex-start; min-height: 40px; background: var(--c-surface); border: 1px solid var(--c-border-strong); color: var(--c-text); box-shadow: var(--shadow-sm); }
.capture-main:hover { border-color: var(--c-accent); background: var(--c-surface); }
.capture-main kbd { display: inline-block; margin-left: auto; }
.navlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.navitem { min-height: 40px; padding: 8px 12px; border-radius: var(--r-md); color: var(--c-nav-text-2); font-weight: 500; font-size: var(--fs-md); gap: var(--s-3); margin: 0; }
.navitem:hover { background: var(--c-nav-hover); color: var(--c-nav-text); }
.navitem.active { background: var(--c-nav-active-bg); color: var(--c-nav-active-text); font-weight: 650; }
.navicon { width: 20px; text-align: center; font-size: 1rem; }
.navbadge { margin-left: auto; min-width: 22px; text-align: center; background: var(--c-nav-badge); color: var(--c-nav-badge-text); border-radius: var(--r-pill); padding: 1px 7px; font-size: var(--fs-xs); font-weight: 650; }
.sidebar-bottom { margin-top: auto; display: grid; gap: var(--s-2); }
.profile { border-top: 1px solid var(--c-nav-border); padding: var(--s-4) var(--s-2) 0; margin: 0; font-size: var(--fs-sm); color: var(--c-nav-text-2); }
.profile .muted, .sidebar .muted { color: var(--c-nav-text-2); }
/* A profil gomb az oldalsáv része, nem kártya: átlátszó, a navigáció színeivel. */
.sidebar button.profile { display: flex; align-items: center; gap: var(--s-3); width: 100%; background: transparent; border: 0; border-top: 1px solid var(--c-nav-border); border-radius: 0; box-shadow: none; color: var(--c-nav-text); text-align: left; }
.sidebar button.profile:hover { background: var(--c-nav-hover); }
.sidebar button.profile.active { background: var(--c-nav-active-bg); color: var(--c-nav-active-text); border-radius: var(--r-md); }
.sidebar .profile strong { color: inherit; display: block; }
.sidebar .profile small { color: var(--c-nav-text-2); }
.sidebar .profile.active small { color: inherit; opacity: .75; }
.sidebar .avatar { background: var(--c-nav-badge); color: var(--c-nav-badge-text); }
.workspace { margin-left: 232px; min-height: 100vh; }
.topbar { height: 64px; padding: 0 var(--s-8); gap: var(--s-4); background: var(--c-bg); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 4; }
.commandbar { flex: 1; max-width: 560px; display: flex; align-items: center; gap: var(--s-3); min-height: 40px; background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); color: var(--c-muted); font-weight: 500; font-size: var(--fs-md); text-align: left; box-shadow: var(--shadow-sm); }
.commandbar:hover { border-color: var(--c-accent); background: var(--c-surface); }
.commandbar > span:first-child { color: var(--c-accent-text); }
.commandbar kbd { margin-left: auto; }
.topright { display: flex; gap: var(--s-2); align-items: center; }
.ai-toggle { gap: 6px; display: inline-flex; align-items: center; }
.ai-toggle > span:first-child { color: var(--c-accent-text); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); display: inline-block; animation: os-pulse 1.4s ease-in-out infinite; }
@keyframes os-pulse { 50% { opacity: .3; } }
main { max-width: 1180px; margin: 0 auto; padding: var(--s-8) var(--s-8) var(--s-12); }
.workspace-footer { display: none; }
.pagehead { margin-bottom: var(--s-6); align-items: flex-start; }
.pagehead h1 { font-size: var(--fs-xl); }
.pagehead p { color: var(--c-muted); max-width: 720px; }

/* Area tabs: one line that says where you are and what else lives here */
.areahead { display: flex; align-items: center; gap: var(--s-4); margin: calc(-1 * var(--s-3)) 0 var(--s-6); border-bottom: 1px solid var(--c-border); flex-wrap: wrap; }
.areaname { margin: 0; font-weight: 650; color: var(--c-text); font-size: var(--fs-md); padding-right: var(--s-2); }
.areatabs { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; }
.areatab { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--c-muted); font-weight: 500; font-size: var(--fs-md); padding: 10px 12px; min-height: 44px; white-space: nowrap; }
.areatab:hover { background: transparent; color: var(--c-text); }
.areatab.active { color: var(--c-accent-text); border-bottom-color: var(--c-accent); font-weight: 650; }
.areahead > .text { margin-left: auto; }

/* ---------- Ma ---------- */
.today-head { margin-bottom: var(--s-6); max-width: 760px; }
.today-head h1 { font-size: 2rem; margin-bottom: var(--s-2); }
.brief { font-size: var(--fs-lg); line-height: 1.6; color: var(--c-text-2); margin: 0; }
.brief-links { margin: var(--s-1) 0 0; }
.brief-links button { padding-left: 0; }
.setup-hint { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); background: var(--c-accent-soft); color: var(--c-accent-text); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-6); }
.today-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-10); align-items: start; }
.now-card { background: var(--c-surface); border: 1px solid var(--c-border); border-left: 4px solid var(--c-accent); border-radius: var(--r-lg); padding: var(--s-6) var(--s-6) var(--s-5); box-shadow: var(--shadow-sm); margin-bottom: var(--s-8); }
.now-card .eyebrow { color: var(--c-accent-text); margin: 0 0 var(--s-2); }
.now-card h2 { font-size: 1.6rem; letter-spacing: -.01em; margin: 0 0 var(--s-2); }
.now-next { font-size: var(--fs-md); color: var(--c-text-2); margin: 0 0 var(--s-2); }
.now-meta { font-size: var(--fs-sm); color: var(--c-muted); margin: 0 0 var(--s-5); }
.now-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.now-actions .primary { min-height: 42px; padding: 10px 20px; font-size: var(--fs-md); }
.today-section { margin-bottom: var(--s-8); }
.slots { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--c-border); }
.slot { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-3); padding: 10px 0 10px var(--s-4); position: relative; }
.slot::before { content: ''; position: absolute; left: -6px; top: 17px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-accent); }
.slot.free::before { border-color: var(--c-border-strong); }
.slot-time { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--c-muted); padding-top: 1px; }
.slot strong { display: block; font-weight: 600; }
.slot small { display: block; }
.slot.free span:last-child { color: var(--c-muted); font-size: var(--fs-sm); font-style: italic; }
.attention-list, .outcomes { list-style: none; margin: 0; padding: 0; }
.attention-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--c-border); font-size: var(--fs-md); }
.attention-list li:last-child { border-bottom: 0; }
.attention-list li > span { color: var(--c-text); line-height: 1.45; }
.attention-list li > button { flex: none; }
.outcomes li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; }
.outcomes li .text { padding: 0; font-size: var(--fs-md); color: var(--c-text); font-weight: 500; text-align: left; }
.check { width: 22px; height: 22px; min-height: 22px; border: 1.5px solid var(--c-border-strong); border-radius: 50%; padding: 0; flex-shrink: 0; background: var(--c-surface); }
.check:hover { border-color: var(--c-accent); }
.checked { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }

/* Prepared plans stay visible but quiet */
.plan-card { background: var(--c-surface); border: 1px solid var(--c-border); border-left: 4px solid var(--c-accent); box-shadow: none; padding: var(--s-4) var(--s-5); margin-bottom: var(--s-6); }
.plan-card h2 { font-size: var(--fs-lg); }
.plan-card > .actions { flex-direction: row; flex-wrap: wrap; }

/* ---------- Work ---------- */
.taskrow { padding: var(--s-3) 0; gap: var(--s-3); border-color: var(--c-border); }
.tasktitle { font-weight: 600; color: var(--c-text); padding: 0; min-height: 0; text-align: left; }
.taskcontent .meta { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-xs); color: var(--c-muted); margin-top: 2px; align-items: center; }
.taskcontent .meta span + span::before { content: '·'; margin-right: var(--s-2); }
.deadline { margin-left: auto; font-size: var(--fs-xs); color: var(--c-muted); }
.deadline.urgent { color: var(--c-danger); font-weight: 600; }
.rowactions { display: flex; gap: var(--s-1); }
.waitingrow { padding: var(--s-4) 0; gap: var(--s-3); border-color: var(--c-border); align-items: center; }
.waitingrow h3 { font-weight: 500; margin: 0 0 2px; }
.waitingrow .person { font-weight: 650; }
.waitingrow .meta { font-size: var(--fs-sm); color: var(--c-muted); }
.waitingrow .due-text { color: var(--c-warning); }
.waitingrow .actions { margin-left: auto; display: flex; gap: var(--s-2); }
.cards { gap: var(--s-4); }
.projectcard { border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-5); background: var(--c-surface); display: flex; flex-direction: column; gap: var(--s-3); }
.projectcard header { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; }
.projectcard h2 { margin: 0; }
.projecttitle { padding: 0; min-height: 0; font-size: var(--fs-lg); font-weight: 650; color: var(--c-text); text-align: left; }
.projectcard .phase { font-size: var(--fs-xs); color: var(--c-muted); white-space: nowrap; }
.project-facts { margin: 0; display: grid; gap: var(--s-2); }
.project-facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-3); }
.project-facts dt { font-size: var(--fs-xs); color: var(--c-muted); padding-top: 2px; }
.project-facts dd { margin: 0; font-size: var(--fs-md); color: var(--c-text); }
.project-facts em { color: var(--c-warning); font-style: normal; }
.projectcard footer { display: flex; gap: var(--s-2); margin-top: auto; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s-4); }
.personcard { border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-5); background: var(--c-surface); }
.personhead { display: flex; gap: var(--s-3); align-items: center; margin-bottom: var(--s-3); }
.personhead h2 { margin: 0; }
.personhead p { margin: 0; font-size: var(--fs-sm); }
.personhead button { margin-left: auto; }
.person-line { margin: var(--s-2) 0 0; font-size: var(--fs-sm); color: var(--c-text); }
.person-line span { display: block; font-size: var(--fs-xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: .05em; }
.avatar { background: var(--c-accent-soft); color: var(--c-accent-text); }

/* ---------- AI panel ---------- */
.ai-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--c-surface); border-left: 1px solid var(--c-border); box-shadow: var(--shadow-lg); z-index: 30; display: flex; flex-direction: column; }
.ai-drawer-head { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--c-border); }
.ai-drawer-head div { flex: 1; }
.ai-drawer-head h2 { margin: 0; }
.ai-drawer-head p { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--c-muted); }
.ai-roles, .ai-drawer .memory-panel { margin: 0; border: 0; border-bottom: 1px solid var(--c-border); border-radius: 0; padding: var(--s-2) var(--s-5); font-size: var(--fs-sm); background: transparent; }
.ai-roles summary { cursor: pointer; color: var(--c-muted); font-size: var(--fs-sm); }
.ai-roles .role-strip { margin: var(--s-2) 0; }
.ai-drawer .chatlog { flex: 1; overflow-y: auto; padding: var(--s-2) var(--s-5); min-height: 0; }
.ai-drawer .bubble { padding: var(--s-3) var(--s-4); margin: var(--s-3) 0; border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--c-surface); }
.ai-drawer .bubble.user { background: var(--c-accent-soft); border-color: transparent; margin-left: 12%; }
.ai-drawer .bubble p, .ai-drawer .bubble li { font-size: var(--fs-md); color: var(--c-text); }
.ai-drawer .ai-empty { text-align: left; padding: var(--s-6) 0; }
.ai-drawer .ai-empty p { font-size: var(--fs-sm); }
.ai-drawer .chatinput { position: static; padding: var(--s-3) var(--s-5) var(--s-4); border-top: 1px solid var(--c-border); background: var(--c-surface); }
.ai-action { background: var(--c-surface-2); color: var(--c-text-2); border-color: var(--c-border); }

/* ---------- Command palette ---------- */
dialog { border-radius: var(--r-lg); border: 1px solid var(--c-border); box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgba(20, 14, 30, .38); }
dialog.palette-dialog { margin-top: 12vh; width: 640px; }
dialog.palette-dialog > header { display: none; }
dialog.palette-dialog .modalbody { padding: 0; }
.palette input { width: 100%; border: 0; border-bottom: 1px solid var(--c-border); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--s-4) var(--s-5); font-size: var(--fs-lg); min-height: 56px; box-shadow: none; }
.palette input:focus { box-shadow: none; outline: none; }
#palette-results { list-style: none; margin: 0; padding: var(--s-2); max-height: 52vh; overflow-y: auto; }
.palette-group { padding: var(--s-3) var(--s-3) var(--s-1); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); font-weight: 650; }
.palette-item { display: flex; justify-content: space-between; gap: var(--s-3); padding: 10px var(--s-3); border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-md); }
.palette-item small { flex: none; }
.palette-item.active, .palette-item:hover { background: var(--c-accent-soft); color: var(--c-accent-text); }
.palette-hint { margin: 0; padding: var(--s-2) var(--s-5) var(--s-3); font-size: var(--fs-xs); color: var(--c-muted); border-top: 1px solid var(--c-border); }

/* ---------- Mobile navigation (hidden on desktop) ---------- */
.bottomnav, .moresheet { display: none; }

/* ---------- Tablet: collapsed sidebar ---------- */
@media (max-width: 1100px) and (min-width: 761px) {
  .sidebar { width: 72px; padding: var(--s-4) var(--s-2); align-items: center; }
  .sidebar .navtext, .capture-main kbd { display: none; }
  .brand { padding: 0; align-items: center; }
  .brand .brandlogo, .brand .brandsub { display: none !important; }
  .brand .brandmark-img { display: block; }
  .capture-main { width: 44px; height: 44px; justify-content: center; padding: 0; margin: var(--s-5) 0; }
  .navitem { justify-content: center; padding: 8px; width: 48px; position: relative; }
  .navbadge { position: absolute; top: 2px; right: 0; min-width: 18px; padding: 0 5px; }
  .profile { justify-content: center; padding-left: 0; padding-right: 0; }
  .workspace { margin-left: 72px; }
  .topbar { padding: 0 var(--s-5); }
  main { padding: var(--s-6) var(--s-5) var(--s-10); }
  .today-grid { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  body { padding-bottom: 72px; }
  .sidebar { display: none; }
  .workspace { margin-left: 0; }
  .topbar { height: 56px; padding: 0 var(--s-4); }
  .commandbar kbd, .ai-toggle, .themebutton { display: none; }
  .commandbar { max-width: none; }
  main { padding: var(--s-5) var(--s-4) var(--s-10); }
  h1, .today-head h1 { font-size: 1.55rem; }
  .brief { font-size: var(--fs-md); }
  .today-grid { grid-template-columns: 1fr; gap: 0; }
  .now-card { padding: var(--s-5) var(--s-4) var(--s-4); margin-bottom: var(--s-6); }
  .now-card h2 { font-size: 1.3rem; }
  .now-actions button { min-height: 44px; }
  .attention-list li { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .areahead { margin-top: 0; gap: 0; }
  .areaname { display: none; }
  .areahead > .text { margin-left: 0; }
  .pagehead { flex-direction: column; gap: var(--s-3); }
  .pagehead .actions { flex-wrap: wrap; }
  .cards, .people-grid { grid-template-columns: 1fr; }
  .project-facts div { grid-template-columns: 1fr; gap: 0; }
  .taskrow { flex-wrap: wrap; }
  .deadline { margin-left: 34px; }
  .rowactions { margin-left: 34px; }
  .waitingrow .actions { margin-left: 0; width: 100%; }
  button, .navitem, .areatab { min-height: 44px; }
  button.small { min-height: 40px; }
  .check { min-height: 26px; width: 26px; height: 26px; }
  .bottomnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--c-surface); border-top: 1px solid var(--c-border); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .bottomitem { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: transparent; color: var(--c-muted); font-size: 11px; font-weight: 600; min-height: 56px; padding: 6px 2px; border-radius: var(--r-md); }
  .bottomitem span { font-size: 1.15rem; line-height: 1; }
  .bottomitem.active { color: var(--c-accent-text); background: var(--c-accent-soft); }
  .moresheet { display: grid; gap: var(--s-2); position: fixed; left: var(--s-3); right: var(--s-3); bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 21; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-3); box-shadow: var(--shadow-lg); }
  .moresheet button { justify-content: flex-start; text-align: left; min-height: 48px; font-size: var(--fs-md); }
  .ai-drawer { width: 100vw; border-left: 0; }
  dialog.palette-dialog { margin-top: 6vh; }
  dialog { max-width: calc(100vw - 16px); }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- QA round 1 ---------- */
button.tasktitle, button.projecttitle, .outcomes li button.text { color: var(--c-text); }
button.tasktitle:hover, button.projecttitle:hover { color: var(--c-accent-text); background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.navitem .navbadge { background: var(--c-accent); color: var(--c-on-accent); border-radius: var(--r-pill); padding: 1px 7px; font-size: var(--fs-xs); }
.today-main .quiet-note { margin-bottom: var(--s-8); }
.attention-item .actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--s-2); max-width: 260px; }
.attention-tabs button { min-height: 34px; }
.fab { display: none; }
/* Row actions appear on hover or keyboard focus on pointer devices; always visible on touch. */
@media (hover: hover) and (pointer: fine) {
  .taskrow .rowactions { opacity: 0; transition: opacity .12s; }
  .taskrow:hover .rowactions, .taskrow:focus-within .rowactions { opacity: 1; }
}
@media (max-width: 760px) {
  .fab { display: grid; place-items: center; position: fixed; right: var(--s-4); bottom: calc(84px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); border: 0; font-size: 1.6rem; box-shadow: var(--shadow-md); z-index: 19; }
  .attention-item { flex-wrap: wrap; }
  .attention-item .actions { max-width: none; justify-content: flex-start; width: 100%; padding-left: 50px; }
}
[data-theme='dark'] .primary, [data-theme='dark'] button.primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
@media (max-width: 760px) { main { padding-bottom: 120px; } }

/* ---------- Live layer: status pill, banner, changes ---------- */
.livepill { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--r-pill); min-height: 34px; padding: 4px 12px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-2); background: var(--c-surface); border: 1px solid var(--c-border); max-width: 320px; }
.livepill .livetext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-success); flex: none; }
.livepill.busy .livedot { background: var(--c-accent); }
.livepill.soon { color: var(--c-warning); } .livepill.soon .livedot { background: var(--c-warning); }
.livepill.news { color: var(--c-accent-text); border-color: var(--c-accent); } .livepill.news .livedot { background: var(--c-accent); }
.live-banner { display: flex; gap: var(--s-4); align-items: center; justify-content: space-between; background: var(--c-surface); border: 1px solid var(--c-border); border-left: 4px solid var(--c-accent); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5); box-shadow: var(--shadow-sm); }
.live-banner.interrupt { border-left-color: var(--c-warning); background: var(--c-warning-soft); }
.live-banner p { margin: 2px 0 0; font-size: var(--fs-sm); }
.live-banner .actions { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; align-items: center; flex: none; max-width: 60%; }
.changes { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.change { display: flex; gap: var(--s-3); justify-content: space-between; align-items: flex-start; padding: var(--s-3) 0; border-bottom: 1px solid var(--c-border); }
.change.interrupt strong::before { content: '● '; color: var(--c-warning); }
.change p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--c-text-2); }
.change .actions { display: flex; flex-wrap: wrap; gap: var(--s-1); justify-content: flex-end; flex: none; max-width: 48%; }
.feed { font-size: var(--fs-sm); color: var(--c-muted); margin-top: var(--s-3); }
.feed summary { cursor: pointer; }
.feed ul { list-style: none; padding: 0; margin: var(--s-2) 0 0; }
.feed li { padding: 3px 0; }
.feed small { font-variant-numeric: tabular-nums; margin-right: 6px; }
.why { margin-top: var(--s-4); font-size: var(--fs-sm); }
.why summary, .alternatives summary { cursor: pointer; color: var(--c-muted); font-weight: 600; font-size: var(--fs-sm); }
.why ul { margin: var(--s-2) 0 0; padding-left: 18px; color: var(--c-text-2); }
.alternatives { margin-top: var(--s-3); }
.alternatives ul { list-style: none; padding: 0; margin: var(--s-2) 0; }
.alternatives li { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--c-border); font-size: var(--fs-sm); }
.alternatives li small { display: block; }
.prepared { background: var(--c-accent-soft); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); }
.prepared .eyebrow { color: var(--c-accent-text); margin: 0 0 var(--s-1); }
.prepared p { color: var(--c-text); margin: 0 0 var(--s-3); }
.slot.task::before { border-color: var(--c-accent); background: var(--c-accent-soft); }
.slot.break::before { border-color: var(--c-border-strong); }
.slot.running::before { background: var(--c-accent); }
.slot.meeting strong { color: var(--c-text); }
.slot.task small, .slot.break small { color: var(--c-muted); }

/* ---------- Work session (focus mode) ---------- */
.focus-shell { background: var(--c-bg); min-height: 100vh; }
.focus-shell > header { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-8); border-bottom: 1px solid var(--c-border); }
.focus-shell > header .livepill { margin-left: auto; }
.focus-banner { max-width: 760px; margin: var(--s-5) auto 0; }
.focus-main { max-width: 760px; margin: 0 auto; padding: var(--s-10) var(--s-6); text-align: left; }
.focus-main h1 { font-size: 2rem; margin: var(--s-2) 0 var(--s-6); }
.focus-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin: 0 0 var(--s-8); }
.focus-facts div { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.focus-facts div:first-child { grid-column: 1 / -1; }
.focus-facts dt { font-size: var(--fs-xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: .05em; }
.focus-facts dd { margin: 4px 0 0; font-size: var(--fs-md); color: var(--c-text); font-weight: 500; }
.focus-facts #timer { font-variant-numeric: tabular-nums; font-size: 1.4rem; font-weight: 650; }
.focus-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.focus-note { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }

/* ---------- Autonomy settings ---------- */
.autonomy { margin-bottom: var(--s-6); }
.autonomy-toggle { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; border-top: 1px solid var(--c-border); cursor: pointer; }
.autonomy-toggle input { min-height: 0; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--c-accent); }
.autonomy-toggle small { display: block; }
.levels { margin-top: var(--s-3); font-size: var(--fs-sm); }
.levels dl { display: grid; grid-template-columns: 140px 1fr; gap: var(--s-2) var(--s-4); margin: var(--s-3) 0 0; }
.levels dt { font-weight: 650; }
.levels dd { margin: 0; color: var(--c-text-2); }
.learning { margin: var(--s-4) 0 0; font-size: var(--fs-sm); }

@media (max-width: 760px) {
  .livepill { max-width: 150px; padding: 4px 10px; }
  .live-banner, .change { flex-direction: column; align-items: stretch; }
  .live-banner .actions, .change .actions { max-width: none; justify-content: flex-start; }
  .focus-facts { grid-template-columns: 1fr 1fr; }
  .focus-shell > header { padding: var(--s-3) var(--s-4); }
  .focus-main { padding: var(--s-6) var(--s-4); }
  .levels dl { grid-template-columns: 1fr; }
}

/* ---------- Development programme ---------- */
.phase-strip { background: var(--c-accent-soft); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-6); }
.phase-strip .eyebrow { color: var(--c-accent-text); }
.phase-strip p { margin: var(--s-1) 0 0; color: var(--c-text); }
.phase-strip ul { margin: var(--s-2) 0 0; padding-left: 18px; color: var(--c-text-2); font-size: var(--fs-sm); }
.assignment h2 { font-size: var(--fs-xl); margin: var(--s-2) 0 var(--s-3); }
.assignment .why { font-size: var(--fs-md); }
.assignment .steps { margin: 0 0 var(--s-3); padding-left: 20px; color: var(--c-text-2); }
.assignment .steps li { margin-bottom: 4px; }
.assignment .actions, .evaluation .actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }
.assignment textarea { width: 100%; }
.evaluation { border-left: 4px solid var(--c-accent); }
.evaluation .score { font-size: var(--fs-xl); font-weight: 700; color: var(--c-accent-text); }
.evaluation .verdict { font-size: var(--fs-lg); color: var(--c-text); margin-bottom: var(--s-3); }
.evaluation h3 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); margin: var(--s-4) 0 var(--s-1); }
.evaluation ul { margin: 0; padding-left: 18px; color: var(--c-text-2); }
.matrix-wrap { overflow-x: auto; }
.matrix { width: 100%; min-width: 840px; border-collapse: collapse; font-size: var(--fs-sm); }
.matrix th, .matrix td { text-align: left; padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.matrix thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); }
.matrix tbody th { font-weight: 650; color: var(--c-text); width: 170px; }
.matrix td.level { width: 150px; }
.matrix td.level .row { display: flex; align-items: center; gap: var(--s-2); }
.matrix td.level small { color: var(--c-muted); white-space: nowrap; }
.matrix td.measure { color: var(--c-muted); }
.matrix .bar { position: relative; height: 6px; border-radius: var(--r-pill); background: var(--c-border); margin-bottom: 6px; }
.matrix .bar i { position: absolute; inset: 0 auto 0 0; background: var(--c-accent); border-radius: var(--r-pill); }
.matrix .bar u { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--c-text-2); }
.matrix select { min-height: 30px; padding: 2px 6px; width: 62px; }
@media (max-width: 760px) { .matrix tbody th { width: 150px; } }
.autonomy-select { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--c-border); }
.autonomy-select span { display: flex; flex-direction: column; }
.autonomy-select small { color: var(--c-muted); }
.autonomy-select select { min-width: 170px; }
.ticketrow { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--c-border); }
.ticketrow span { line-height: 1.4; }
.notice.amber { background: var(--c-warning-soft); color: var(--c-warning); }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--c-border); border-top-color: var(--c-accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.replyhint { margin-top: var(--s-3); }
.replyhint summary { cursor: pointer; color: var(--c-muted); font-size: var(--fs-sm); }
.ticketrow .small { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* Rich-text editor */
.editor { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-3) 0; }
.editor-label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-2); }
.editor-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border: 1px solid var(--c-border); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--c-surface-2); }
.editor-btn { min-width: 32px; min-height: 32px; padding: 0 var(--s-2); border: 0; background: transparent; border-radius: var(--r-sm); color: var(--c-text-2); font-size: var(--fs-sm); cursor: pointer; }
.editor-btn:hover { background: var(--c-accent-soft); color: var(--c-accent); }
.editor-btn.style-b { font-weight: 800; }
.editor-btn.style-i { font-style: italic; }
.editor-btn.style-u { text-decoration: underline; }
.editor-area { border: 1px solid var(--c-border); border-radius: 0 0 var(--r-md) var(--r-md); padding: var(--s-3); background: var(--c-surface); overflow-y: auto; max-height: 45vh; line-height: 1.55; }
.editor-area:focus { outline: 2px solid var(--c-accent); outline-offset: -1px; }
.editor-area p { margin: 0 0 var(--s-2); }
.editor-area ul, .editor-area ol { margin: 0 0 var(--s-2) var(--s-4); }
.editor-area a { color: var(--c-accent); }
.signature-pick { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-2) 0; }
.signature-pick select { min-width: 190px; }
.signature-empty { margin: var(--s-2) 0; }
.signature-preview { border-left: 2px solid var(--c-border); padding: var(--s-2) var(--s-3); color: var(--c-text-2); font-size: var(--fs-sm); }
.signature-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--c-border); }
.signature-row .rowactions { display: flex; gap: var(--s-2); }
.signature-block { margin: var(--s-2) 0 var(--s-3); }
.signature-peek summary { cursor: pointer; color: var(--c-muted); font-size: var(--fs-sm); }
.signature-peek .signature-preview { margin-top: var(--s-2); }
.editor-area img { max-width: 100%; height: auto; border-radius: var(--r-sm); margin: var(--s-2) 0; }
.signature-preview img { max-width: 240px; height: auto; }

/* Attachments and pictures inside received messages */
.outlook-body.rich { white-space: normal; }
.outlook-body.rich img { max-width: 100%; height: auto; border-radius: var(--r-sm); margin: var(--s-2) 0; }
.outlook-body.rich table { max-width: 100%; }
.outlook-body.rich blockquote { margin: var(--s-2) 0; padding-left: var(--s-3); border-left: 2px solid var(--c-border); color: var(--c-text-2); }
.remote-image { display: inline-block; padding: 2px 8px; border: 1px dashed var(--c-border); border-radius: var(--r-sm); color: var(--c-muted); font-size: var(--fs-sm); }
.attachments { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--c-border); }
.attachments-head { font-size: var(--fs-sm); color: var(--c-text-2); margin-bottom: var(--s-2); }
.attachment-pictures { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.attachment-pictures figure { margin: 0; max-width: 220px; }
.attachment-pictures img { max-width: 220px; max-height: 160px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--c-border); display: block; }
.attachment-pictures figcaption { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 4px; word-break: break-word; }
.attachment-files { list-style: none; margin: 0; padding: 0; }
.attachment-files li { padding: var(--s-2) 0; border-bottom: 1px solid var(--c-border); display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; }
/* A formatted message is shown whole: a picture must not be cut off by an inner scrollbar. */
.daktela-item .outlook-body.rich { max-height: none; overflow: visible; }

.sync-pill { font-size: var(--fs-xs); color: var(--c-muted); margin-left: var(--s-2); }
.sync-pill.offline { color: var(--c-warning); font-weight: 600; }

/* First run */
.onb { max-width: 760px; margin: 0 auto; padding: var(--s-6) var(--s-4); }
.onb-head h1 { font-size: var(--fs-2xl); margin: 0 0 var(--s-2); }
.onb-head .lead { font-size: var(--fs-lg); color: var(--c-text-2); margin: 0 0 var(--s-5); }
.onb-steps { display: flex; gap: var(--s-4); margin-bottom: var(--s-5); font-size: var(--fs-sm); color: var(--c-muted); }
.onb-steps span b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-border); color: var(--c-text-2); margin-right: 6px; font-size: var(--fs-xs); }
.onb-steps .current { color: var(--c-text); font-weight: 600; }
.onb-steps .current b, .onb-steps .done b { background: var(--c-accent); color: var(--c-on-accent); }
.onb-card { margin-bottom: var(--s-4); }
.onb-card h3 { margin-top: 0; }
.onb-focus { border: 0; padding: 0; margin: var(--s-4) 0 0; }
.onb-focus legend { font-weight: 600; margin-bottom: var(--s-2); }
.onb-option { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md); margin-bottom: var(--s-2); cursor: pointer; }
.onb-option:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-soft); }
.onb-option input { margin-top: 4px; }
.onb-option small { display: block; color: var(--c-muted); }
.onb-choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.chip.ok { background: var(--c-success-soft, var(--c-success-soft)); color: var(--c-success, var(--c-success)); }
.chip.info { background: var(--c-accent-soft, var(--c-info-soft)); color: var(--c-accent, var(--c-info)); }
a.button { display: inline-block; padding: var(--s-2) var(--s-4); border-radius: var(--r-md); text-decoration: none; font-weight: 600; }
a.button.primary { background: var(--c-accent); color: var(--c-on-accent); }
@media (max-width: 700px) { .onb-choice { grid-template-columns: 1fr; } .onb-steps { flex-wrap: wrap; gap: var(--s-2); } }
.onb-option input[type="radio"] { width: 18px; height: 18px; flex: 0 0 auto; margin: 3px 0 0; accent-color: var(--c-accent); }
.onb-option span { flex: 1; text-align: left; }
.onb .formgrid { gap: var(--s-3); }

.nba-feedback { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); font-size: var(--fs-sm); }

.attention-source.note { background: var(--c-accent-soft); color: var(--c-accent); }

.memo-list { list-style: none; margin: 0 0 var(--s-3); padding: 0; }
.memo-row { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: var(--s-1) var(--s-2); align-items: center; padding: var(--s-2) 0; border-bottom: 1px solid var(--c-border); }
.memo-row input, .memo-row select { margin: 0; min-height: 34px; max-width: 100%; }
.memo-row .memo-title { grid-column: 2; width: 100%; }
/* A felelős, a név és a határidő külön sorba kerül a cím alá, és szűk panelben is olvasható marad. */
.memo-row .memo-fields { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.memo-row .memo-fields select { flex: 0 1 8rem; min-width: 6.5rem; }
.memo-row .memo-fields input:not([type="date"]) { flex: 1 1 7rem; min-width: 6rem; }
.memo-row input[type="date"] { flex: 1 1 9.5rem; min-width: 8.5rem; }
.memo-send { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-1); margin-bottom: var(--s-3); }
.memo-summary { color: var(--c-text-2); }
@media (max-width: 760px) { .memo-row .memo-fields { flex-direction: column; align-items: stretch; } }

.feature-flags { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.feature-flags label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.feature-flags input { width: auto; margin: 0; accent-color: var(--c-accent); }
.week-report .value-line { margin-top: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); background: var(--c-accent-soft); }
.week-report .value-line details { margin-top: var(--s-2); }
a.button { border: 1px solid var(--c-border); color: var(--c-text); background: var(--c-surface); }

.person-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: var(--s-3); }
.person-card h3 { margin: 0; }
.person-open { list-style: none; margin: var(--s-2) 0; padding: 0; font-size: var(--fs-sm); }
.person-open li { padding: 2px 0; }
.person-where { font-size: var(--fs-xs); }
.person-suggestions { list-style: none; margin: 0; padding: 0; }
.person-suggestions li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--c-border); }

.shortcut-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-3); align-items: center; }
.shortcut-list li { display: contents; }
kbd { display: inline-block; min-width: 22px; padding: 2px 6px; border: 1px solid var(--c-border); border-bottom-width: 2px; border-radius: var(--r-sm); background: var(--c-surface-2); font: inherit; font-size: var(--fs-xs); text-align: center; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.sync-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill, 999px); font-size: var(--fs-xs); white-space: nowrap; }
.sync-pill.saved { padding: 0; }
.sync-pill.pending { background: var(--c-surface-2); color: var(--c-text-muted); }
.sync-pill.offline { background: var(--c-warn-soft, var(--c-warning-soft)); color: var(--c-warn-strong, var(--c-warning)); font-weight: 600; }

.error-page { max-width: 46rem; margin: var(--s-6) auto; }
.error-page h1 { font-size: var(--fs-xl); margin-bottom: var(--s-3); }
.error-page .actions { margin-top: var(--s-4); display: flex; gap: var(--s-2); }

.listmore { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-border); font-size: var(--fs-sm); }
.listfilter { margin-left: auto; }
.listfilter input { min-width: 16rem; max-width: 100%; padding: var(--s-2) var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); color: inherit; font: inherit; }
@media (max-width: 720px) { .listfilter { margin-left: 0; width: 100%; } .listfilter input { min-width: 0; width: 100%; } }

/* Honnan jött a feladat: halk hivatkozás a sorban, hogy egy kattintással megnyitható legyen az előzmény. */
.origin-link { padding: 0 4px; font-size: var(--fs-xs); color: var(--c-text-muted); }
.origin-link:hover { color: var(--c-accent); text-decoration: underline; }

/* Belépőképernyő: egyetlen kártya, semmi más — ide a munkatér nem szivárog be. */
.authscreen { min-height: 100vh; display: grid; place-items: center; padding: var(--s-4); background: var(--c-bg); }
.authcard { width: min(30rem, 100%); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg, 14px); padding: var(--s-6, 28px); box-shadow: 0 12px 40px rgba(0,0,0,.08); }
.authcard header { display: grid; gap: var(--s-1); margin-bottom: var(--s-4); }
.authcard .authlogo { width: min(240px, 72%); height: auto; display: block; margin: var(--s-2) 0 var(--s-2); }
/* Sötét módban a fehér változat (a sötétkék szóvédjegy sötét alapon nem látszana). */
.authcard .authlogo.logo-white { display: none; }
[data-theme='dark'] .authcard .authlogo.logo-white { display: block; }
[data-theme='dark'] .authcard .authlogo.logo-color { display: none; }
.authcard .subbrand { margin: 0; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.focus-shell .brand .brandmark-img { display: block; width: 30px; height: 30px; }
.authcard .brandmark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--c-accent); color: var(--c-on-accent); font-weight: 700; }
.authcard h1 { font-size: var(--fs-xl); margin: 0; }
.authcard h2 { font-size: var(--fs-lg); margin: 0 0 var(--s-1); }
.authcard label { display: grid; gap: 4px; margin-bottom: var(--s-3); }
.authcard input { padding: var(--s-2) var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md); font: inherit; background: var(--c-surface); color: inherit; }
.authcard fieldset { border: 0; padding: 0; margin: 0; }
.authcard .formactions { margin-top: var(--s-4); }
.authcard .formactions button { width: 100%; }

/* Az integrációs sor ott is olvasható marad, ahol kevés a hely: szűk oszlopban egymás alá kerül,
   szélesebben egy sorba. A méretet a panel szélessége dönti el, nem a képernyőé. */
/* A profiloldalon a két űrlap egymás mellett fér el, az integrációk pedig alatta, teljes szélességben:
   a lépésről lépésre leírásnak kell a hely. */
.profilegrid { grid-template-columns: minmax(0,1fr); }
@media (min-width: 60rem) { .profilegrid > section { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-4); align-items: start; } }
.integrations-panel { container-type: inline-size; margin-top: var(--s-4); }
.integration-help .help-body { max-width: 78ch; }
.integration-row { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-2); align-items: start; }
.integration-row .integration-name { display: grid; gap: 2px; min-width: 0; }
.integration-row .integration-name strong { overflow-wrap: break-word; }
.integration-row .integration-name small { color: var(--c-text-muted); line-height: 1.45; }
.integration-row .integration-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.integration-row .actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@container (min-width: 30rem) {
 .integration-row { grid-template-columns: minmax(0,1fr) auto; align-items: center; }
 .integration-row .integration-name { grid-row: span 2; }
 .integration-row .integration-state { justify-content: flex-end; }
 .integration-row .actions { justify-content: flex-end; }
}
@container (min-width: 46rem) {
 .integration-row { grid-template-columns: minmax(0,1fr) auto auto; }
 .integration-row .integration-name { grid-row: auto; }
}

/* Táblázat szűk helyen: inkább görgethető, mint összenyomott — telefonon pedig kártyákká alakul,
   ahol minden érték mellett ott a neve. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.usertable { width: 100%; border-collapse: collapse; min-width: 52rem; }
.usertable th, .usertable td { padding: var(--s-2) var(--s-3); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--c-border); }
.usertable th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-muted); white-space: nowrap; }
.usertable td.actions { display: flex; flex-wrap: wrap; gap: 4px; }
.auditlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-sm); }
.auditlist li { padding: 4px 0; border-bottom: 1px solid var(--c-border); overflow-wrap: anywhere; }
.onetime-password code { font-size: var(--fs-lg); letter-spacing: .04em; padding: var(--s-2) var(--s-3); background: var(--c-surface-2); border-radius: var(--r-md); display: inline-block; }

@media (max-width: 860px) {
 .usertable { min-width: 0; }
 .usertable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
 .usertable tr { display: grid; gap: 2px; padding: var(--s-3) 0; border-bottom: 1px solid var(--c-border); }
 .usertable td { display: grid; grid-template-columns: minmax(7rem, 38%) 1fr; gap: var(--s-2); border: 0; padding: 2px 0; }
 .usertable td::before { content: attr(data-label); color: var(--c-text-muted); font-size: var(--fs-xs); }
 .usertable td.actions { display: grid; grid-template-columns: 1fr; margin-top: var(--s-2); }
 .usertable td.actions::before { content: none; }
}

/* Rács- és flexelemek alapból nem zsugorodnak a tartalmuk alá: egy széles táblázat ezért kifeszíti
   az egész oldalt. Ez a szabály engedi őket összehúzódni, így a görgetés ott marad, ahová való. */
#main-content, .workspace, .detailgrid > *, .cards > *, .panel, .areahead, .outlook-mail > *, .daktela-mail > * { min-width: 0; }
/* A területfülek szűk képernyőn vízszintesen görgethetők, nem lógnak ki. */
.areatabs { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.areatabs .areatab { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 700px) {
 .areahead { display: grid; gap: var(--s-2); }
 .toolbar { flex-wrap: wrap; gap: var(--s-2); }
 .formgrid { grid-template-columns: 1fr; }
}

/* Hosszú, szóköz nélküli érték (útvonal, azonosító) ne feszítse ki az oldalt. */
.statusgrid, .statusgrid *, .healthdetail, .system-status, #system-status, #ai-usage { overflow-wrap: anywhere; }

/* A felhasználótáblában a név kapjon helyet: a műveletek oszlopa ne szorítsa össze. */
.usertable td:first-child, .usertable th:first-child { min-width: 11rem; }
.usertable td[data-label="Utolsó belépés"] { white-space: nowrap; }
.usertable td.actions { max-width: 16rem; }
.usertable td.actions button { white-space: nowrap; }

/* Telefonon a feladatsor két szintre bomlik: a cím kapja a teljes szélességet, alatta a részletek
   és a műveletek. Így a cím nem 80 pixelen törik szavanként. */
@media (max-width: 620px) {
 .taskrow { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 4px var(--s-2); align-items: start; }
 .taskrow .taskcontent { grid-column: 2; min-width: 0; }
 .taskrow .tasktitle { text-align: left; white-space: normal; }
 .taskrow .deadline { grid-column: 2; justify-self: start; }
 .taskrow .rowactions { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: 4px; }
 .waitingrow { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 4px var(--s-2); }
 .waitingrow .taskcontent, .waitingrow .actions { grid-column: 2; }
 .inboxitem, .attention-item { flex-wrap: wrap; }
}

/* Beállítások telefonon: a kapcsoló- és profilsorok egymás alá kerülnek, hogy a magyarázó szöveg
   teljes szélességben olvasható maradjon. */
@media (max-width: 620px) {
 .autonomy-select, .autonomy-row, .integration-row, .settings-row { display: grid; grid-template-columns: 1fr; gap: var(--s-2); align-items: start; }
 .autonomy-select select, .autonomy-select input { width: 100%; }
 .profile-summary, .profilecard { display: grid; grid-template-columns: 1fr; gap: var(--s-2); }
}

/* A rendszerállapot csempéi telefonon egymás alá kerülnek, hogy a szöveg ne 96 pixelen törjön. */
@media (max-width: 620px) {
 .time-kv { grid-template-columns: 1fr !important; }
 #system-status, #ai-usage { display: grid; gap: var(--s-2); }
}

/* Az egyszer használatos jelszó jól olvasható és könnyen kijelölhető. */
.onetime-password code { user-select: all; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
#new-user-password { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .02em; }

/* A megosztható cím jól olvasható és egy kattintással másolható. */
.sharelink { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.sharelink code { font-size: var(--fs-lg); padding: var(--s-2) var(--s-3); background: var(--c-surface-2); border-radius: var(--r-md); user-select: all; }

/* A belépőképernyő másodlagos hivatkozásai. */
.authlinks { margin: var(--s-3) 0 0; text-align: center; }
.authlinks button { font-size: var(--fs-sm); }

/* Megosztható cím: összecsukva indul, a fejlécben ott a lényeg. */
.sharepanel > summary { cursor: pointer; list-style: none; }
.sharepanel > summary::-webkit-details-marker { display: none; }
.sharepanel > summary::before { content: '▸'; display: inline-block; width: 1em; color: var(--c-text-muted); transition: transform .12s ease; }
.sharepanel[open] > summary::before { transform: rotate(90deg); }
.sharesummary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.sharesummary code { font-size: var(--fs-sm); padding: 2px 8px; background: var(--c-surface-2); border-radius: var(--r-sm); }
.sharebody { margin-top: var(--s-3); }

/* Integrációs súgó: összecsukva ott van, kinyitva végigvezet. */
.integration-guide { grid-column: 1 / -1; }
/* Jelölőnégyzet a mellette álló szöveggel egy sorban, nem alatta. */
.checkline { display: flex; align-items: flex-start; gap: var(--s-2); font-weight: 500; margin-top: var(--s-3); }
.checkline input { width: auto; margin: 3px 0 0; flex: none; }
.integration-help > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--c-accent); }
.integration-help .help-body { margin-top: var(--s-2); padding: var(--s-3); background: var(--c-surface-2); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.6; }
.integration-help h4 { margin: var(--s-3) 0 2px; font-size: var(--fs-sm); }
.integration-help h4:first-child { margin-top: 0; }
.integration-help p { margin: 0 0 var(--s-1); }
.integration-help .help-steps { margin: 4px 0 0; padding-left: 1.4em; display: grid; gap: 4px; }
.integration-help .help-list { margin: 4px 0 0; padding-left: 1.1em; display: grid; gap: 4px; }
.integration-help .help-note { margin-top: var(--s-2); padding: var(--s-2); background: var(--c-surface); border-left: 3px solid var(--c-accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.integration-help code { overflow-wrap: anywhere; }

/* ── Interaktív bemutató ─────────────────────────────────────────────────────────────────────
   A kiemelés egy üres doboz, ami köré óriási árnyékot rajzolunk: így a kiemelt elem marad
   világos, minden más elsötétül. Az egész réteg átereszti a kattintást, hogy a „kattints ide”
   típusú lépéseknél tényleg használni lehessen a felületet. */
.tour-root { position: fixed; inset: 0; z-index: 140; pointer-events: none; }
.tour-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(10, 16, 26, .58); outline: 2px solid var(--c-accent); outline-offset: 0; transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease; }
.tour-spot-none { outline: 0; border-radius: 0; }
.tour-pop { position: fixed; pointer-events: auto; background: var(--c-surface); color: inherit; border: 1px solid var(--c-border); border-radius: var(--r-lg, 14px); box-shadow: 0 24px 60px rgba(10, 16, 26, .28); padding: var(--s-4); max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto; }
.tour-pop:focus { outline: none; }
.tour-pop h2 { margin: var(--s-2) 0 var(--s-2); font-size: var(--fs-lg, 1.05rem); }
.tour-body { font-size: var(--fs-sm); line-height: 1.6; }
.tour-body kbd { font: inherit; font-size: .8em; border: 1px solid var(--c-border); border-radius: 4px; padding: 1px 5px; }
.tour-hint { margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); background: var(--c-surface-2); border-left: 3px solid var(--c-accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-sm); }
.tour-progress { display: flex; align-items: center; gap: var(--s-2); }
.tour-bar { flex: 1; height: 4px; background: var(--c-surface-2); border-radius: 999px; overflow: hidden; }
.tour-bar i { display: block; height: 100%; background: var(--c-accent); border-radius: 999px; transition: width .25s ease; }
.tour-count { font-size: var(--fs-xs); color: var(--c-text-muted); white-space: nowrap; }
.tour-close { border: 0; background: transparent; font-size: 1.15rem; line-height: 1; padding: 2px 6px; color: var(--c-text-muted); }
.tour-actions { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); flex-wrap: wrap; }
.tour-spacer { flex: 1; }
/* Telefonon alsó lapka: a kiemelt elem fölött marad a hely. */
.tour-pop.tour-sheet { left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; max-height: 58vh; }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-bar i { transition: none; } }

/* A „?” gomb és a súgópanel */
.helpbutton { font-weight: 700; }
.helpmenu { display: grid; gap: var(--s-2); }
.helpmenu button { text-align: left; }
.helpmenu small { display: block; color: var(--c-text-muted); font-weight: 400; margin-top: 2px; }

/* Az útmutató legyen megtalálható: az oldalsávban saját menüpont, a fejlécben felirattal. */
.helpnav .navicon { font-weight: 700; }
.helpbutton { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 900px) { .helpbutton .helptext { display: none; } }

/* ── Megjelenés választó ─────────────────────────────────────────────────────────────────────
   Nem legördülő: kártyák, rajtuk a téma három színével, hogy látszódjon, mit választ az ember. */
.appearance-panel .theme-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--s-3); margin-top: var(--s-3); }
.theme-card { display: grid; gap: 4px; text-align: left; padding: var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); cursor: pointer; }
.theme-card:hover { background: var(--c-surface-hover); border-color: var(--c-border-strong); }
.theme-card.selected { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); background: var(--c-accent-soft); }
.theme-card small { color: var(--c-text-muted, var(--c-muted)); font-weight: 400; line-height: 1.4; }
.theme-name { font-weight: 600; font-size: var(--fs-sm); display: flex; align-items: center; gap: 6px; }
.theme-tick { color: var(--c-accent-text); }
.theme-swatch { display: flex; height: 26px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--c-border); }
.theme-swatch i { display: block; flex: 1; }
.theme-swatch .sw-a { background: var(--sw-strong); flex: 2; }
.theme-swatch .sw-b { background: var(--sw-soft); }
.theme-swatch .sw-c { background: var(--sw-dark); }
.mode-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.mode-button { border: 1px solid var(--c-border); border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); background: var(--c-surface); font-size: var(--fs-sm); }
.mode-button:hover { background: var(--c-surface-hover); }
.mode-button.selected { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); font-weight: 600; }

/* ── Az egész felület a hangsúlyszínt kövesse ────────────────────────────────────────────────
   Jelölőnégyzet, rádiógomb, kapcsoló, kijelölés, fókuszgyűrű: mind a témából veszi a színét. */
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--c-accent); }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
::selection { background: var(--c-accent-soft); color: var(--c-accent-text); }
a { color: var(--c-accent-text); }
progress::-webkit-progress-value { background: var(--c-accent); }
progress::-moz-progress-bar { background: var(--c-accent); }

/* ── Csoportos kijelölés (projektek, feladatok) ──────────────────────────────────────────────── */
.projectcard { position: relative; }
.bulk-check { position: absolute; top: var(--s-3); left: var(--s-3); width: 26px; height: 26px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-on-accent); font-size: .8rem; line-height: 1; z-index: 2; }
/* Kijelölő módban a kártya fejléce helyet hagy a bal felső pipának. */
body[data-bulk="projects"] .projectcard > header { padding-left: 34px; }
.taskrow { position: relative; }
.taskrow .bulk-check { position: static; margin-right: var(--s-1); flex: none; }
.bulk-check.on { background: var(--c-accent); border-color: var(--c-accent); }
.bulk-check:hover { border-color: var(--c-accent); }
.bulk-selected { outline: 2px solid var(--c-accent); outline-offset: -1px; background: var(--c-accent-soft); }
.projectcard.bulk-selected { box-shadow: 0 0 0 1px var(--c-accent); }
/* Kijelölő módban a feladatsor sima „kész" köre elrejtve — a pipa helyettesíti. */
body[data-bulk="tasks"] .taskrow > .check { display: none; }
/* A lebegő műveletsáv az ablak alján. */
.bulkbar { position: sticky; bottom: var(--s-4); z-index: 20; display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-4) auto 0; max-width: 44rem; padding: var(--s-3) var(--s-4); border: 1px solid var(--c-border);
  border-radius: var(--r-pill); background: var(--c-surface); box-shadow: var(--shadow-lg); }
.bulkbar .bulkcount { font-weight: 600; font-size: var(--fs-sm); }
.bulkbar .bulkspacer { flex: 1; }
@media (max-width: 640px) { .bulkbar { flex-wrap: wrap; border-radius: var(--r-lg); } }

/* ── Fejlesztési javaslatok ───────────────────────────────────────────────────────────────────── */
.suggest-form { margin-bottom: var(--s-4); }
.suggest-form textarea { min-height: 5rem; }
.suggest-list { display: grid; gap: var(--s-3); }
.suggest-card { display: grid; gap: var(--s-2); }
.suggest-head h3 { margin: 0; }
.suggest-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.suggest-body { margin: 0; color: var(--c-text-2); line-height: 1.6; }
.suggest-note { padding: var(--s-2) var(--s-3); background: var(--c-surface-2); border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-sm); }
.suggest-admin { border-top: 1px solid var(--c-border); padding-top: var(--s-3); display: grid; gap: var(--s-2); }
.suggest-admin .actions { gap: var(--s-2); }
.suggest-card[data-status="done"] { opacity: .9; }
.suggest-card[data-status="rejected"] { opacity: .75; }
.chip.info { background: var(--c-info-soft); color: var(--c-info); }

/* Javaslatokhoz csatolt képek */
.suggest-attach { margin: var(--s-3) 0; display: grid; gap: var(--s-2); }
.suggest-attach .filebutton { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: var(--s-2) var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md); cursor: pointer; font-size: var(--fs-sm); }
.suggest-attach .filebutton:hover { background: var(--c-surface-hover); }
.suggest-attach .filebutton input { display: none; }
.suggest-thumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
.suggest-thumb { position: relative; display: inline-block; width: 92px; height: 92px; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; background: var(--c-surface-2); }
.suggest-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suggest-thumb .thumb-remove { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: rgba(255,255,255,.95); font-size: .9rem; line-height: 1; }

/* Visszajelzés gomb a fejlécben — kiemelt, hogy mindenki lássa, tud ilyet küldeni. */
.feedback-btn { display: inline-flex; align-items: center; gap: 6px; border-color: var(--c-accent); color: var(--c-accent-text); font-weight: 600; }
.feedback-btn:hover { background: var(--c-accent-soft); }
@media (max-width: 900px) { .feedback-btn .helptext { display: none; } }
.suggest-context { margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3); background: var(--c-accent-soft); border-radius: var(--r-md); font-size: var(--fs-sm); }
.suggest-quick .filebutton { border-color: var(--c-accent); }
/* Céges belépés (SSO): a gombok teljes szélességűek, egymás alatt; a vészhozzáférés visszafogott. */
.authcard .formactions.sso-actions { display: grid; gap: var(--s-2); justify-content: stretch; }
.authcard .sso-actions a.button { display: block; text-align: center; padding: var(--s-3) var(--s-4); }
.authcard .sso-local { margin-top: var(--s-4); border-top: 1px solid var(--c-border); padding-top: var(--s-3); }
.authcard .sso-local summary { cursor: pointer; color: var(--c-text-muted, inherit); }