/* Täydentävät muuttujat (jos ak.css ei niitä määrittele) */
:root{
  --ak-clay-soft:#FBF0EB;
  --ak-shadow-lift:0 4px 10px rgba(46,34,24,.08),0 18px 40px rgba(46,34,24,.12);
}

/* Arkikahvilan foorumin tyylit. Täydentää ak.css:ää (jaetut --ak-* muuttujat).
   Mockupien pohjalta: lämmin paperi, Lora-otsikot, savi/salvia-aksentit. */

.fo-crumb{font-size:14px;color:var(--ak-ink-soft);margin-bottom:12px}
.fo-crumb a{color:var(--ak-clay);text-decoration:none}
.fo-crumb a:hover{text-decoration:underline}

.fo-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:10px}
.fo-stats{display:flex;gap:24px;flex-wrap:wrap;color:var(--ak-ink-soft);font-size:14.5px;margin:14px 0 6px}
.fo-stats b{color:var(--ak-clay);font-weight:700}

.fo-newbtn{white-space:nowrap}

/* --- Taso 1: ryhmät ja osastot --- */
.fo-group{margin-bottom:28px}
.fo-group-title{font-family:"Lora",serif;font-size:14px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ak-ink-soft);margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--ak-line);display:flex;align-items:center;gap:9px}
.fo-group-title::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ak-clay)}
.fo-arealist{background:var(--ak-card);border:1px solid var(--ak-line);border-radius:16px;overflow:hidden;box-shadow:var(--ak-shadow)}
.fo-area{display:flex;align-items:center;gap:16px;padding:17px 20px;border-bottom:1px solid var(--ak-line);text-decoration:none;color:inherit;transition:.15s}
.fo-area:last-child{border-bottom:none}
.fo-area:hover{background:var(--ak-clay-soft)}
.fo-area-main{flex:1;min-width:0}
.fo-area-name{font-family:"Lora",serif;font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:2px;color:var(--ak-ink)}
.fo-area-name .fo-crisis-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:#f3dde9;color:#9c3f6b;border-radius:999px;padding:2px 9px;margin-left:8px;vertical-align:middle}
.fo-area-desc{font-size:14px;color:var(--ak-ink-soft);line-height:1.4}
.fo-area-stats{text-align:right;flex-shrink:0;min-width:92px}
.fo-area-count{font-size:15px;font-weight:700;color:var(--ak-ink)}
.fo-area-count span{font-weight:500;color:var(--ak-ink-soft);font-size:13.5px}
.fo-area-latest{font-size:12.5px;color:var(--ak-ink-soft);margin-top:3px}
.fo-area-latest b{color:var(--ak-clay);font-weight:600}
@media(max-width:620px){.fo-area-stats{display:none}}

/* --- Taso 2: ketjulista --- */
.fo-sortbar{display:flex;align-items:center;gap:8px;padding:16px 0 14px;flex-wrap:wrap}
.fo-sortbar .lbl{font-size:14px;color:var(--ak-ink-soft);font-weight:500;margin-right:3px}
.fo-sortchip{font-size:14px;font-weight:600;padding:7px 15px;border-radius:999px;border:1px solid var(--ak-line);background:var(--ak-card);color:var(--ak-ink-soft);cursor:pointer;text-decoration:none;transition:.15s}
.fo-sortchip:hover{border-color:var(--ak-clay);color:var(--ak-clay)}
.fo-sortchip.on{background:var(--ak-ink);color:var(--ak-paper);border-color:var(--ak-ink)}
.fo-sortbar .fo-count{margin-left:auto;font-size:14px;color:var(--ak-ink-soft)}

.fo-threads{background:var(--ak-card);border:1px solid var(--ak-line);border-radius:16px;overflow:hidden;box-shadow:var(--ak-shadow)}
.fo-trow{display:flex;align-items:center;gap:16px;padding:15px 20px;border-bottom:1px solid var(--ak-line);text-decoration:none;color:inherit;transition:.15s}
.fo-trow:last-child{border-bottom:none}
.fo-trow:hover{background:var(--ak-clay-soft)}
.fo-trow.pinned{background:linear-gradient(120deg,#fffdf8,#f7efe0)}
.fo-trow-main{flex:1;min-width:0}
.fo-trow-title{font-family:"Lora",serif;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ak-ink);margin-bottom:3px;line-height:1.3;display:flex;align-items:center;gap:8px}
.fo-pin{color:var(--ak-clay);font-size:13px}
.fo-trow-meta{font-size:13.5px;color:var(--ak-ink-soft);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.fo-trow-stats{display:flex;gap:20px;flex-shrink:0;text-align:center}
.fo-tstat{min-width:50px}
.fo-tstat .n{font-size:16px;font-weight:700;color:var(--ak-ink);line-height:1}
.fo-tstat .l{font-size:12px;color:var(--ak-ink-soft);margin-top:3px}
.fo-trow-last{flex-shrink:0;text-align:right;min-width:118px;font-size:12.5px;color:var(--ak-ink-soft);line-height:1.4}
.fo-trow-last b{color:var(--ak-clay);font-weight:600}
@media(max-width:720px){.fo-trow-stats,.fo-trow-last{display:none}}

/* nimimerkki + lukko + tunnistepiste */
.fo-nick{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:#4d3f33}
.fo-badge{border:none;background:none;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;color:#b9a88f;transition:.15s}
.fo-badge:hover{background:var(--ak-paper-2);color:var(--ak-ink-soft)}
.fo-badge.locked{color:var(--ak-sage)}
.fo-badge.locked svg{width:13px;height:13px}
.fo-badge.locked:hover{background:var(--ak-sage-soft)}

/* --- Taso 3: ketju --- */
.fo-posts{display:flex;flex-direction:column;gap:14px;margin:8px 0 24px}
.fo-post{background:var(--ak-card);border:1px solid var(--ak-line);border-radius:16px;padding:18px 20px;box-shadow:var(--ak-shadow)}
.fo-post.fo-op{border-left:3px solid var(--ak-clay)}
.fo-meta{display:flex;align-items:center;gap:9px;margin-bottom:8px;font-size:14px}
.fo-meta .fo-name{font-weight:600;color:var(--ak-ink)}
.fo-tl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:var(--ak-sage-soft);color:var(--ak-sage);border-radius:999px;padding:2px 9px}
.fo-time{color:var(--ak-ink-soft)}
.fo-post p{font-size:16px;color:#43352a;line-height:1.6;margin:0}
.fo-post-img{max-width:100%;border-radius:12px;border:1px solid var(--ak-line);margin-top:12px}
.fo-acts{display:flex;gap:10px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--ak-line)}
.fo-hbtn{display:inline-flex;align-items:center;gap:7px;background:var(--ak-paper-2);border:1px solid var(--ak-line);color:var(--ak-ink);font:inherit;font-weight:600;font-size:14px;padding:8px 15px;border-radius:999px;cursor:pointer;transition:.15s}
.fo-hbtn:hover,.fo-hbtn.voted{background:#fae0d0;border-color:var(--ak-clay);color:var(--ak-clay)}
.fo-rep{margin-left:auto;background:none;border:none;font:inherit;font-size:13px;color:var(--ak-ink-soft);cursor:pointer;padding:8px}
.fo-rep:hover{color:var(--ak-clay)}
.fo-pending{margin-top:12px;padding-top:12px;border-top:1px solid var(--ak-line);font-size:13.5px;color:var(--ak-ink-soft);font-style:normal}
.fo-hidden{background:var(--ak-paper-2);border:1px dashed #cdbfa6;border-radius:12px;padding:14px 16px;color:var(--ak-ink-soft);font-size:14px}
.fo-op-title{font-family:"Lora",serif;font-size:23px;font-weight:600;letter-spacing:-.015em;margin-bottom:4px}

/* --- Kirjoituslomake --- */
.fo-compose{background:var(--ak-card);border:1px solid var(--ak-line);border-radius:16px;padding:18px 20px;box-shadow:var(--ak-shadow);margin-top:8px}
.fo-compose-top{display:flex;align-items:center;gap:10px;margin-bottom:11px;flex-wrap:wrap}
.fo-nickchip{display:inline-flex;align-items:center;gap:8px;background:var(--ak-paper-2);border:1px solid var(--ak-line);border-radius:999px;padding:6px 8px 6px 14px;font-size:14px}
.fo-nickchip b{font-weight:600;color:var(--ak-ink)}
.fo-change{background:var(--ak-card);border:1px solid var(--ak-line);border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ak-ink-soft);padding:3px 10px;cursor:pointer}
.fo-change:hover{border-color:var(--ak-clay);color:var(--ak-clay)}
.fo-compose input[type=text],.fo-compose textarea{width:100%;border:1px solid var(--ak-line);border-radius:11px;background:var(--ak-paper);font:inherit;font-size:15.5px;color:var(--ak-ink);padding:12px 14px;margin-bottom:10px}
.fo-compose textarea{min-height:90px;resize:vertical}
.fo-compose input:focus,.fo-compose textarea:focus{outline:none;border-color:var(--ak-clay);background:#fff}
.fo-compose-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fo-attach{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ak-ink-soft);background:var(--ak-paper-2);border:1px solid var(--ak-line);border-radius:9px;padding:9px 14px;cursor:pointer}
.fo-attach:hover{border-color:var(--ak-clay);color:var(--ak-clay)}
.fo-attach input{display:none}
.fo-publish{margin-left:auto}
.fo-modnote{font-size:12.5px;color:var(--ak-ink-soft);margin-top:10px;line-height:1.45}
.fo-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* hunajapurkki */

/* PIN-kenttä piilossa kunnes tarvitaan */
.fo-pinwrap{display:none}
.fo-pinwrap.show{display:block}
.fo-pinhelp{font-size:12.5px;color:var(--ak-ink-soft);margin:-4px 0 10px;line-height:1.45}

/* --- Miniprofiili --- */
.fo-miniprofile{position:fixed;z-index:60;background:var(--ak-card);border:1px solid var(--ak-line);border-radius:14px;box-shadow:var(--ak-shadow-lift);padding:16px 18px;width:240px;display:none}
.fo-miniprofile.show{display:block}
.fo-mp-top{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.fo-mp-avatar{width:42px;height:42px;border-radius:11px;background:var(--ak-paper-2);display:flex;align-items:center;justify-content:center;font-family:"Lora",serif;font-weight:700;font-size:19px;color:var(--ak-clay);flex-shrink:0}
.fo-mp-name{font-family:"Lora",serif;font-weight:600;font-size:17px;display:flex;align-items:center;gap:6px}
.fo-mp-name .mlock{color:var(--ak-sage);display:inline-flex}
.fo-mp-name .mlock svg{width:13px;height:13px}
.fo-mp-status{font-size:12.5px;color:var(--ak-sage);font-weight:600;margin-top:1px}
.fo-mp-status.unlocked{color:var(--ak-ink-soft);font-weight:500}
.fo-mp-rows{font-size:13.5px;color:var(--ak-ink-soft);line-height:1.7}
.fo-mp-rows b{color:var(--ak-ink);font-weight:600}
.fo-mp-id{font-size:12px;color:#b9a88f;margin-top:8px;padding-top:8px;border-top:1px solid var(--ak-line)}

/* sivutus */
.fo-pager{display:flex;gap:7px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.fo-pager a,.fo-pager span{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ak-line);background:var(--ak-card);border-radius:10px;text-decoration:none;color:var(--ak-ink-soft);font-weight:600;font-size:14.5px;padding:0 12px}
.fo-pager a:hover{border-color:var(--ak-clay);color:var(--ak-clay)}
.fo-pager .active span{background:var(--ak-ink);color:var(--ak-paper);border-color:var(--ak-ink)}