/* =========================================================
   OPTIONAL — Multi-Screen Interactive Prototype
   Stylesheet (paste into the Codecraft CSS tab).
   Fonts load here via @import so the HTML stays pure
   body content. Utility classes at the bottom replace the
   inline style="..." attributes for clean HTML5.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Dangrek&family=Caveat:wght@500;600&family=Nunito:wght@400;500;600;700&display=swap');

/* ========== DESIGN TOKENS (palette) ========== */
:root{
  --oat:#ECE4D5; --paper:#F7F2E9; --walnut:#8A6A4F; --amber:#E0A24E;
  --sienna:#C06B3A; --green:#66734F; --blue:#5E7C89; --pink:#A85E67; --ink:#34302A;
  --cork:#C7A26B;
}
/* ========== RESET ========== */
*{ margin:0; padding:0; box-sizing:border-box; }
/* ========== STAGE (centers the phone; flexbox per assignment) ========== */
#stage{
  font-family:'Nunito', system-ui, sans-serif;
  background:var(--oat);
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
}
/* ========== PHONE FRAME (rem-based, not px) ========== */
#phone{
  width:22.5rem; height:48.75rem;      /* 350 x 660 at 16px base */
  background:
    radial-gradient(circle at 50% 20%, rgba(224,162,78,0.22) 0%, rgba(224,162,78,0) 46%),
    radial-gradient(circle at 12% 90%, rgba(192,107,58,0.18) 0%, rgba(192,107,58,0) 44%),
    radial-gradient(circle at 90% 80%, rgba(78,110,106,0.16) 0%, rgba(78,110,106,0) 46%),
    linear-gradient(160deg, #EFE6D6 0%, #E4D8C3 100%);
  border-radius:2.75rem; border:0.56rem solid var(--ink);
  overflow:hidden; position:relative; display:flex; flex-direction:column;
  box-shadow:0 1.1rem 2.5rem rgba(52,48,42,0.35);
}
#glow{
  position:absolute; top:0; left:0; right:0; height:7.5rem;
  background:radial-gradient(circle at 50% 0%, rgba(224,162,78,0.20) 0%, rgba(224,162,78,0) 75%);
  pointer-events:none; z-index:0;
}
/* ========== SCREEN SWITCHING ========== */
/* .screen is hidden by default; .active-screen is shown.  */
.screen{ display:none; flex:1; flex-direction:column; position:relative; z-index:1; height:100%; }
.active-screen{ display:flex; }
/* ========== SHARED CHROME (status bar, branding, menu) ========== */
.statusbar{
  height:1.5rem; display:flex; align-items:center; justify-content:space-between;
  padding:0 1.4rem; font-size:0.7rem; font-weight:600; color:var(--ink);
  position:relative; z-index:1;
}
.branding{ text-align:center; padding:0 1.25rem; position:relative; z-index:1; }
.appname{ font-family:'Dangrek', system-ui, sans-serif; font-size:0.9rem; color:var(--walnut); letter-spacing:0.04em; line-height:1; }
.tagline{ font-size:0.5rem; color:#9c9384; font-style:italic; line-height:1.4; }
.menurow{ display:flex; justify-content:space-between; align-items:center; padding:0.15rem 1.15rem 0; position:relative; z-index:1; }
.hamburger{ font-size:1.15rem; color:var(--ink); cursor:pointer; background:none; border:none; }
.pagetitle{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.4rem; font-weight:400; color:var(--ink);
  text-align:center; padding:0.25rem 1rem 0.1rem; line-height:1.15; }
.quote{ font-family:'Caveat', cursive; font-size:1rem; color:var(--sienna); font-weight:600;
  text-align:center; padding:0 1.9rem 0.4rem; }
/* ========== SHARED COMPANION BAR (bottom of every screen) ========== */
.companion{ background:var(--ink); color:var(--paper); border-radius:1.13rem;
  margin:0.75rem 0.9rem 0.9rem; padding:1rem 1.13rem; display:flex; align-items:center; gap:0.6rem;
  min-height:4rem; box-shadow:0 0.4rem 1rem rgba(52,48,42,0.4); position:relative; z-index:1; cursor:pointer; }
.companion::before{ content:""; position:absolute; top:0; left:1rem; right:1rem; height:0.13rem; background:var(--walnut); border-radius:0.13rem; }
.companion input{ flex:1; min-width:0; border:none; background:transparent; color:var(--paper);
  font-family:'Caveat', cursive; font-size:1.2rem; outline:none; pointer-events:none; }
.companion input::placeholder{ color:#c9c2b6; }
.companion .sendbtn{ background:var(--sienna); color:var(--paper); border:none; border-radius:0.63rem;
  padding:0.56rem 1rem; font-size:0.8rem; font-weight:700; cursor:pointer; }
.content{ flex:1; overflow-y:auto; padding:0.4rem 0.9rem 0; display:flex; flex-direction:column; gap:1rem; position:relative; z-index:1; }
/* ========== INTRO SCREEN ========== */
/* ===== INTRO couch + tagline overlay =====
   Tune these 4 values in Codecraft to place the tagline between the couch legs:
     --tag-x  : left/right  (50% = centered; lower = left, higher = right)
     --tag-y  : up/down     (higher % = lower on the couch)
     --tag-size: text size
     --tag-color: text color                                            */
#screen-intro{ justify-content:flex-start; --tag-x:50%; --tag-y:72%; --tag-size:1.15rem; --tag-color:#F7F2E9; }
.couch-area{ height:34%; display:flex; align-items:center; justify-content:center; padding:2.9rem 1.9rem 0; }
.couch-wrap{ position:relative; height:100%; display:flex; align-items:center; justify-content:center; }
.couch-wrap img{ width:100%; height:auto; filter:drop-shadow(0 0.6rem 1rem rgba(52,48,42,0.16)); }
.couch-tagline{ position:absolute; top:var(--tag-y); left:var(--tag-x); transform:translate(-50%,-50%);
  font-family:'Caveat', cursive; font-size:var(--tag-size); color:var(--tag-color); font-weight:600;
  white-space:nowrap; text-align:center; text-shadow:0 0.06rem 0.2rem rgba(52,48,42,0.4); pointer-events:none; }
.couch-area img{ width:100%; height:auto; filter:drop-shadow(0 0.6rem 1rem rgba(52,48,42,0.16)); }
.greeting{ flex:1; display:flex; align-items:center; justify-content:center; padding:0 2rem; text-align:center; }
.greeting h1{ font-family:'Dangrek', system-ui, sans-serif; font-size:2.6rem; color:var(--ink); font-weight:400; line-height:1.25; }
.intro-actions{ display:flex; flex-direction:column; align-items:center; padding:0 1.9rem 2.75rem; }
.intro-actions button{ width:14.5rem; border:none; border-radius:62.4rem; padding:0.88rem 0;
  font-family:'Nunito', system-ui, sans-serif; font-size:1.06rem; font-weight:600; cursor:pointer; letter-spacing:0.02em; }
.intro-actions .share{ background:var(--sienna); color:var(--paper); margin-bottom:0.75rem; box-shadow:0 0.4rem 1rem rgba(192,107,58,0.32); }
.intro-actions .dont{ background:transparent; color:var(--blue); border:0.1rem solid #C7BCA9; }
/* ========== HOME SCREEN ========== */
.mapbox{ height:11.25rem; border-radius:0.75rem; border:0.13rem solid var(--ink); overflow:hidden;
  box-shadow:0 0.2rem 0.6rem rgba(52,48,42,0.22); }
.mapbox img{ width:100%; height:100%; object-fit:cover; display:block; }
.highlights-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0.4rem; }
.highlight{ background:var(--paper); border-radius:0.5rem; box-shadow:0 0.13rem 0.4rem rgba(52,48,42,0.18);
  border-left:0.19rem solid var(--green); font-size:0.56rem; font-weight:600; color:var(--ink); padding:0.4rem; line-height:1.2; }
.highlight.b{ border-left-color:var(--blue); }
.highlight.p{ border-left-color:var(--pink); }
.divider{ height:0.13rem; background:var(--walnut); opacity:0.35; border-radius:0.13rem; margin:0.13rem 0.4rem; }
.subheader{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.06rem; font-weight:400; color:var(--ink); text-align:center; }
.navlinks{ display:flex; justify-content:space-around; gap:0.5rem; }
.navlink{ display:flex; flex-direction:column; align-items:center; gap:0.4rem; cursor:pointer; }
.navlink span{ font-size:0.63rem; font-weight:700; color:var(--ink); text-align:center; }
.shape{ width:4rem; height:4rem; background-size:cover; background-position:center; box-shadow:0 0.25rem 0.6rem rgba(52,48,42,0.28); }
.shape.circle{ border-radius:50%; border:0.13rem solid var(--ink); }
.shape.squircle{ border-radius:1.4rem; border:0.13rem solid var(--ink); }
.shape.blob{ border:0.13rem solid var(--ink); border-radius:58% 42% 63% 37% / 41% 46% 54% 59%; }
/* ========== MIND / BODY SCREEN ========== */
.hero{ height:11.25rem; border-radius:0.75rem; border:0.13rem solid var(--ink); overflow:hidden; box-shadow:0 0.2rem 0.6rem rgba(52,48,42,0.22); }
.hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.listwrap{ position:relative; }
.optionlist{ background:var(--paper); border-radius:0.75rem; border:0.13rem solid var(--ink);
  box-shadow:0 0.2rem 0.6rem rgba(52,48,42,0.22); overflow-y:auto; max-height:14rem; }
.optionrow{ display:flex; align-items:center; justify-content:space-between; padding:0.94rem 1rem;
  min-height:3rem; border-bottom:0.06rem solid var(--oat); cursor:pointer; }
.optionrow:last-child{ border-bottom:none; }
.optionrow .label{ font-size:0.94rem; font-weight:700; color:var(--ink); }
.optionrow .chevron{ font-size:1rem; color:var(--sienna); font-weight:700; }
/* ========== CHAT ROOMS SCREEN ========== */
.roomstab{ display:flex; align-items:center; gap:0.3rem; background:var(--blue); color:var(--paper);
  border:none; border-radius:62.4rem; padding:0.3rem 0.7rem; font-size:0.7rem; font-weight:700; cursor:pointer;
  box-shadow:0 0.13rem 0.4rem rgba(52,48,42,0.25); }
.campfire{ display:flex; align-items:center; gap:0.6rem; color:var(--paper); border-radius:0.75rem;
  border:0.13rem solid var(--ink); padding:1rem; cursor:pointer; box-shadow:0 0.2rem 0.6rem rgba(52,48,42,0.25);
  position:relative; overflow:hidden; min-height:5.75rem; }
.campfire .cf-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.campfire::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(52,48,42,0.72) 0%, rgba(52,48,42,0.45) 55%, rgba(52,48,42,0.25) 100%); }
.campfire .cf-text{ flex:1; position:relative; z-index:2; }
.campfire .cf-title{ font-size:1.06rem; font-weight:700; line-height:1.1; text-shadow:0 0.06rem 0.25rem rgba(0,0,0,0.5); }
.campfire .cf-sub{ font-family:'Caveat', cursive; font-size:0.94rem; color:#f6e3d4; text-shadow:0 0.06rem 0.25rem rgba(0,0,0,0.5); }
.campfire .cf-go{ font-size:1.13rem; font-weight:700; position:relative; z-index:2; text-shadow:0 0.06rem 0.25rem rgba(0,0,0,0.5); }
.feedlabel{ font-family:'Dangrek', system-ui, sans-serif; font-size:0.9rem; color:var(--ink); padding-left:0.13rem; }
.post{ background:var(--paper); border-radius:0.75rem; border:0.09rem solid #ddd2bd; box-shadow:0 0.13rem 0.45rem rgba(52,48,42,0.12); padding:0.7rem 0.8rem; }
.post-head{ display:flex; align-items:center; gap:0.5rem; margin-bottom:0.4rem; }
.avatar{ width:1.6rem; height:1.6rem; border-radius:50%; flex-shrink:0; }
.a1{ background:var(--green); } .a2{ background:var(--pink); } .a3{ background:var(--blue); }
.post-user{ font-size:0.75rem; font-weight:700; color:var(--ink); }
.post-time{ font-size:0.63rem; color:#9c9384; }
.post-body{ font-size:0.78rem; color:var(--ink); line-height:1.4; }
.post-img{ margin-top:0.5rem; height:7.5rem; border-radius:0.5rem; overflow:hidden; background:#cdbfa6; display:flex; align-items:center; justify-content:center; }
.post-img img{ width:100%; height:100%; object-fit:cover; }
.post-actions{ display:flex; gap:1rem; margin-top:0.5rem; }
.post-actions span{ font-size:0.7rem; color:var(--walnut); font-weight:600; }
/* ========== KNOWLEDGE HUB SCREEN ========== */
.sharebtn{ background:var(--green); color:var(--paper); border:none; border-radius:62.4rem;
  padding:0.3rem 0.75rem; font-size:0.7rem; font-weight:700; cursor:pointer; box-shadow:0 0.13rem 0.4rem rgba(52,48,42,0.25); }
.board{ flex:1; overflow-y:auto; margin:0.4rem 0.75rem 0; border-radius:0.75rem; border:0.19rem solid #6f4f2e;
  background-color:var(--cork);
  background-image:
    radial-gradient(rgba(120,85,40,0.35) 0.06rem, transparent 0.1rem),
    radial-gradient(rgba(160,120,70,0.30) 0.06rem, transparent 0.1rem);
  background-size:0.56rem 0.56rem, 0.81rem 0.81rem; background-position:0 0, 0.3rem 0.4rem;
  box-shadow:inset 0 0.13rem 0.6rem rgba(80,55,25,0.4);
  padding:0.75rem 0.6rem; display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; align-content:start; }
.kcard{ background:var(--paper); border-radius:0.38rem; padding:0.56rem 0.56rem 0.6rem; position:relative;
  box-shadow:0 0.2rem 0.5rem rgba(52,48,42,0.3); min-height:6rem; display:flex; flex-direction:column; }
.kcard::before{ content:""; position:absolute; top:-0.3rem; left:50%; transform:translateX(-50%);
  width:0.75rem; height:0.75rem; border-radius:50%; background:radial-gradient(circle at 35% 35%, #f08a8a, #c0392b); box-shadow:0 0.13rem 0.19rem rgba(0,0,0,0.4); }
.kcard:nth-child(3n)::before{ background:radial-gradient(circle at 35% 35%, #7fb3e0, #2c6ca3); }
.kcard:nth-child(3n+1)::before{ background:radial-gradient(circle at 35% 35%, #8fc98f, #4a7d4a); }
.ktype{ font-size:0.53rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:0.13rem 0.4rem; border-radius:0.25rem; align-self:flex-start; margin-bottom:0.4rem; }
.t-video{ background:#f3d9cf; color:#993c1d; } .t-read{ background:#dbe6d2; color:#3b6d11; }
.t-link{ background:#d5e2ea; color:#185fa5; } .t-audio{ background:#efe0c0; color:#854f0b; }
.t-support{ background:#f4cdd3; color:#993556; }
.kthumb{ height:2.5rem; border-radius:0.25rem; margin-bottom:0.4rem; background:linear-gradient(135deg,#cdbfa6,#b7a68a); display:flex; align-items:center; justify-content:center; font-size:1rem; }
.ktitle{ font-size:0.7rem; font-weight:700; color:var(--ink); line-height:1.25; }
.kmeta{ font-size:0.56rem; color:#9c9384; margin-top:auto; }
.kcard.support{ background:#fbeef0; border:0.09rem solid var(--pink); grid-column:1 / -1; min-height:auto; }
.kcard.support::before{ background:radial-gradient(circle at 35% 35%, #e88f9a, #a83a4a); }
.kcard.support .ktitle{ font-size:0.75rem; }
.kcard.support .kline{ font-size:0.63rem; color:var(--ink); margin-top:0.19rem; }
.kcard.support .kline strong{ color:var(--pink); }
/* ========== COMPANION CHAT SCREEN ========== */
.chathead{ display:flex; align-items:center; gap:0.6rem; padding:0.25rem 1.15rem 0.4rem; position:relative; z-index:1; }
.chathead .cavatar{ width:2.75rem; height:2.75rem; border-radius:50%; object-fit:cover; border:0.13rem solid var(--ink); background:var(--paper); }
.chathead .cname{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.25rem; color:var(--ink); line-height:1; }
.chathead .cstatus{ font-family:'Caveat', cursive; font-size:0.9rem; color:var(--green); }
.thread{ flex:1; overflow-y:auto; padding:0.5rem 0.9rem; display:flex; flex-direction:column; gap:0.6rem; position:relative; z-index:1; }
.msg{ max-width:76%; padding:0.63rem 0.8rem; font-size:0.8rem; line-height:1.4; box-shadow:0 0.13rem 0.4rem rgba(52,48,42,0.15); }
.msg.bot{ align-self:flex-start; background:var(--paper); color:var(--ink); border-radius:0.88rem 0.88rem 0.88rem 0.25rem; border:0.06rem solid #e0d5c0; }
.msg.you{ align-self:flex-end; background:var(--sienna); color:var(--paper); border-radius:0.88rem 0.88rem 0.25rem 0.88rem; }
.msgrow{ display:flex; align-items:flex-end; gap:0.44rem; max-width:100%; align-self:flex-start; }
.msgrow .mini{ width:1.6rem; height:1.6rem; border-radius:50%; object-fit:cover; border:0.09rem solid var(--ink); background:var(--paper); flex-shrink:0; }
/* ========== LEFT DRAWER (app menu) ========== */
#scrim{ position:absolute; inset:0; background:rgba(52,48,42,0.45); opacity:0; pointer-events:none; transition:opacity 0.25s; z-index:5; }
#scrim.open{ opacity:1; pointer-events:auto; }
#menu-drawer{ position:absolute; top:0; left:0; height:100%; width:13.75rem; background:var(--paper);
  border-right:0.19rem solid var(--ink); transform:translateX(-100%); transition:transform 0.25s; z-index:6;
  display:flex; flex-direction:column; padding:1.5rem 1rem; box-shadow:0.5rem 0 1.5rem rgba(52,48,42,0.3); }
#menu-drawer.open{ transform:translateX(0); }
#menu-drawer h3{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.25rem; color:var(--ink); margin-bottom:0.25rem; }
#menu-drawer .dsub{ font-family:'Caveat', cursive; font-size:0.9rem; color:var(--sienna); margin-bottom:1rem; }
.navitem{ display:flex; align-items:center; gap:0.6rem; padding:0.8rem 0.5rem; border-radius:0.5rem; cursor:pointer; font-size:0.9rem; font-weight:600; color:var(--ink); border-bottom:0.06rem solid var(--oat); }
.navitem:last-child{ border-bottom:none; }
.navitem .ndot{ width:0.6rem; height:0.6rem; border-radius:50%; flex-shrink:0; }
/* ========== RIGHT DRAWER (topic rooms) ========== */
#rooms-drawer{ position:absolute; top:0; right:0; height:100%; width:13.13rem; background:var(--paper);
  border-left:0.19rem solid var(--ink); transform:translateX(100%); transition:transform 0.25s; z-index:6;
  display:flex; flex-direction:column; padding:1.25rem 0.9rem; box-shadow:-0.5rem 0 1.5rem rgba(52,48,42,0.3); overflow-y:auto; }
#rooms-drawer.open{ transform:translateX(0); }
#rooms-drawer h3{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.06rem; color:var(--ink); margin-bottom:0.25rem; }
#rooms-drawer .dsub{ font-family:'Caveat', cursive; font-size:0.9rem; color:var(--sienna); margin-bottom:0.9rem; }
.roomrow{ display:flex; align-items:center; gap:0.5rem; padding:0.7rem 0.5rem; border-radius:0.5rem; cursor:pointer; }
.roomrow .roomdot{ width:0.56rem; height:0.56rem; border-radius:50%; flex-shrink:0; }
.roomrow .rn{ font-size:0.8rem; font-weight:600; color:var(--ink); }
.drawer-close{ position:absolute; top:0.9rem; right:0.9rem; font-size:1.13rem; color:var(--ink); cursor:pointer; background:none; border:none; }
/* ===== per-screen spacing tuning (S24 height) ===== */
/* Chat Rooms: pull companion up ~2 nudges by trimming feed bottom space */
#screen-chatrooms .content{ gap:0.85rem; padding-bottom:0; }
#screen-chatrooms .companion{ margin-top:0.35rem; }
/* Home: lower the divider + options group a touch for even rhythm */
#screen-home .content{ gap:1.15rem; }
#screen-home .divider{ margin-top:0.7rem; }
/* Mind/Body: lengthen the scrollable list to fill the taller frame */
#screen-mindbody .optionlist{ max-height:19rem; }

/* =========================================================
   UTILITY CLASSES
   These replace the inline style="..." attributes that used
   to sit in the HTML, so the markup stays presentation-free.
   ========================================================= */
/* Home nav shapes — background images */
.shape--mindbody{  background-image:url('https://codecraftworks.dev/web/B9SW4A0CmgUkIoHvwf6H/assets/Meditate.png'); }
.shape--chatrooms{ background-image:url('https://codecraftworks.dev/web/B9SW4A0CmgUkIoHvwf6H/assets/group-of-diverse-people-talking-chatting-bonding.png'); }
.shape--knowledge{ background-image:url('https://codecraftworks.dev/web/B9SW4A0CmgUkIoHvwf6H/assets/Resources.png'); }
/* Drawer dot colors (menu + topic rooms) */
.dot-amber{  background:var(--amber); }
.dot-green{  background:var(--green); }
.dot-blue{   background:var(--blue); }
.dot-pink{   background:var(--pink); }
.dot-sienna{ background:var(--sienna); }
.dot-walnut{ background:var(--walnut); }

codecraft-web-project-footer {
    display: none !important;
}