/*
Theme Name: PalmX
Theme URI: https://wordpress.im/
Author: wp-im
Description: Palm OS に着想を得た、P2 形式の投稿フィード向け WordPress クラシックテーマです。
Version: 0.1.10
Requires at least: 6.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: plamx
Domain Path: /languages
*/

:root{--desk:#bdbdbd;--shell:#d7d7d7;--shell-hi:#f0f0f0;--screen:#dce6cf;--screen2:#d2ddc4;--screen3:#c6d3b7;--ink:#111;--muted:#465044;--line:#697464;--soft:#a5b09b;--max:540px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:radial-gradient(circle at 50% 0,#d2d2d2 0,#b8b8b8 48%,#9e9e9e 100%);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:14px;line-height:1.55;padding:22px}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}
.device{width:min(var(--max),100%);margin:0 auto;background:var(--shell);border:2px solid #333;border-radius:20px;padding:14px;box-shadow:0 7px 0 #777,0 12px 28px rgba(0,0,0,.25),inset 1px 1px 0 var(--shell-hi),inset -1px -1px 0 #aaa}.screen{background:var(--screen);border:3px inset #aaa;min-height:680px;overflow:hidden}
.appbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 8px;border-bottom:1px solid #333;font-weight:700;background:var(--screen2)}.brand{display:flex;align-items:center;gap:6px}.appicon{width:14px;height:14px;border:1px solid #111;background:linear-gradient(135deg,#111 0 48%,transparent 49% 100%)}.appbar .right{display:flex;align-items:center;gap:8px;font-size:12px}.live-dot{width:7px;height:7px;background:#243d2d;border:1px solid #111;display:inline-block}.badge{min-width:18px;height:18px;padding:0 4px;border:1px solid #111;border-radius:9px;display:inline-grid;place-items:center;background:#111;color:var(--screen);font-size:11px}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #333;background:var(--screen2)}.tabs a{text-align:center;padding:6px 3px;border-right:1px solid #555;font-size:12px}.tabs a:last-child{border-right:0}.tabs a.on{background:#111;color:var(--screen)}.subtabs{display:flex;border-bottom:1px solid var(--line);background:var(--screen3)}.subtabs button,.subtabs a{flex:1;border:0;border-right:1px solid var(--line);background:transparent;padding:5px 4px;text-align:center;font-size:11px}.subtabs *:last-child{border-right:0}.subtabs .on{background:#111;color:var(--screen)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 7px;border-bottom:1px solid var(--line);background:var(--screen2)}.palm-btn{border:1px solid #333;background:var(--screen);padding:4px 7px;border-radius:4px;box-shadow:1px 1px 0 #87927f,inset 1px 1px 0 #f3f7ee;font-weight:700;font-size:12px}.palm-btn:active{background:#111;color:var(--screen);box-shadow:none}.palm-btn.primary{background:#111;color:var(--screen)}
.composer{padding:8px;border-bottom:1px solid var(--line);background:var(--screen)}.compose-head{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:8px;align-items:start}.avatar{width:38px;height:38px;border:1px solid #333;background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(0,0,0,.08)),var(--screen3);box-shadow:inset 1px 1px 0 #f2f6ec;display:grid;place-items:center;font-size:11px;font-weight:700;overflow:hidden}.avatar.large{width:66px;height:66px;font-size:18px}.avatar.mini{width:26px;height:26px;font-size:9px}.identity{font-size:11px;color:var(--muted)}.identity strong{display:block;color:#111;font-size:13px}.post-types{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end}.post-types button{border:1px solid var(--line);background:var(--screen2);padding:3px 5px;font-size:10px}.post-types button.on{background:#111;color:var(--screen)}
.editor-wrap{margin:7px 0 0 46px;border:1px solid #333;background:#e6eedc;box-shadow:inset 1px 1px 0 #96a18d}.title-input,.editor-wrap textarea,.tag-input,.search-input{width:100%;border:0;background:transparent;padding:6px 7px;outline:0}.title-input{border-bottom:1px solid var(--soft);font-weight:700}.editor-wrap textarea{min-height:76px;resize:vertical;line-height:1.4}.compose-meta{margin-left:46px;padding-top:6px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.tags{display:flex;gap:4px;flex-wrap:wrap;font-size:10px}.tag-chip{border:1px solid var(--line);padding:2px 4px;background:var(--screen2)}
.feed-controls{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:6px 7px;border-bottom:1px solid var(--line);background:var(--screen2);font-size:11px}.display-modes{display:flex;border:1px solid #333}.display-modes button{border:0;border-right:1px solid #333;background:transparent;padding:3px 5px;font-size:10px}.display-modes button:last-child{border-right:0}.display-modes button.on{background:#111;color:var(--screen)}.live-banner{margin:6px 7px 0;border:1px solid #333;background:#edf3e6;padding:5px 7px;font-size:11px;display:flex;justify-content:space-between;gap:8px}
.post{display:grid;grid-template-columns:38px minmax(0,1fr);gap:8px;padding:9px 8px 8px;border-bottom:1px solid var(--soft)}.post:hover{background:rgba(255,255,255,.18)}.post .meta{font-size:10px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 7px;align-items:center}.post .meta strong{font-size:12px;color:#111}.post-title{font-weight:700;margin-top:2px;line-height:1.32}.post-body{margin-top:4px}.post-body p{margin:0 0 6px}.post-body p:last-child{margin-bottom:0}.post-body blockquote{margin:6px 0;padding:4px 7px;border-left:3px solid #667561;background:rgba(255,255,255,.28)}.post-actions{margin-top:6px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:var(--muted);font-size:10px}.post-actions button,.post-actions a{border:0;background:transparent;padding:0;text-decoration:underline}.count{font-weight:700}.latest{margin-top:6px;border:1px solid var(--line);background:rgba(255,255,255,.28);padding:5px 6px;font-size:10px}.latest strong{font-size:10px}
.inline-comments{grid-column:2;margin-top:7px;border-top:1px dotted var(--line)}.comment{--depth:0;position:relative;margin-left:calc(min(var(--depth),4) * 14px);padding:7px 4px 6px 0;border-bottom:1px dotted var(--soft)}.comment::before{content:'';position:absolute;left:-8px;top:0;bottom:0;border-left:1px solid var(--soft)}.comment.depth-0::before{display:none}.comment-head{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:6px;align-items:start}.comment-meta{font-size:10px;color:var(--muted)}.comment-meta strong{color:#111;font-size:11px}.comment-body{margin-top:2px;font-size:12px}.comment-actions{margin-top:3px;font-size:10px;color:var(--muted)}.comment-actions button{border:0;background:transparent;padding:0;margin-right:7px;text-decoration:underline}.reply-box{margin:5px 0 3px 32px;padding:5px;border:1px solid var(--line);background:rgba(255,255,255,.22)}.reply-box textarea{width:100%;min-height:48px;resize:vertical;background:transparent;border:0;outline:0}.reply-box .row{display:flex;justify-content:flex-end;gap:5px}
body.mode-compact .post{grid-template-columns:28px minmax(0,1fr);padding:6px 8px}body.mode-compact .avatar{width:28px;height:28px;font-size:8px}body.mode-compact .post-body,body.mode-compact .latest,body.mode-compact .inline-comments{display:none!important}body.mode-compact .post-title{font-size:12px}body.mode-default .inline-comments{display:none}body.mode-expanded .inline-comments{display:block}body.mode-expanded .latest{display:none}
.list-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px;border-bottom:1px solid var(--soft)}.list-row .main strong{display:block}.list-row .main small,.list-row .side{color:var(--muted);font-size:10px}.search-box{padding:8px;border-bottom:1px solid var(--line);background:var(--screen2)}.search-input{border:1px solid #333;background:#e7eedf;height:32px}.search-summary{padding:6px 8px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}.section-title{padding:5px 8px;border-bottom:1px solid var(--line);background:var(--screen3);font-weight:700;font-size:12px}.topic-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:7px 8px;border-bottom:1px solid var(--soft)}.topic-row small{color:var(--muted)}
.profile-card{padding:10px 8px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:66px minmax(0,1fr);gap:10px}.profile-card h1{margin:0;font-size:18px}.profile-bio{margin-top:5px}.stats{margin-top:7px;display:flex;gap:14px;flex-wrap:wrap;font-size:10px;color:var(--muted)}.stats strong{display:block;font-size:13px;color:#111}.notification{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;padding:8px;border-bottom:1px solid var(--soft)}.notification.unread{background:rgba(255,255,255,.28)}.notification .nmeta{font-size:10px;color:var(--muted)}.article-head{padding:8px;border-bottom:1px solid var(--line);background:var(--screen2);font-size:11px}.article-head strong{display:block;font-size:13px}.page-body{padding:10px 8px}.page-body h1{font-size:19px;margin:0 0 8px}.page-body h2{font-size:15px;margin:14px 0 6px}.page-body p{margin:0 0 9px}
.graffiti{border-top:1px solid #555;margin-top:10px;padding:9px 6px 4px;text-align:center;font-family:'Courier New',monospace;color:#444;font-size:11px}.hardware{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:9px 24px 2px}.hw{text-align:center;font-size:9px;color:#444}.hw i{display:block;width:28px;height:14px;margin:0 auto 3px;border:1px solid #555;border-radius:8px;background:#c1c1c1;box-shadow:inset 1px 1px 0 #eee}.bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #333;background:var(--screen2)}.bottom-nav a{padding:6px 2px;text-align:center;font-size:10px;border-right:1px solid #555}.bottom-nav a:last-child{border-right:0}.bottom-nav a.on{background:#111;color:var(--screen)}.hidden{display:none!important}
@media(max-width:580px){body{padding:0;background:var(--shell)}.device{width:100%;border:0;border-radius:0;padding:4px;box-shadow:none}.screen{min-height:calc(100vh - 8px)}.hardware{display:none}.graffiti{padding-bottom:6px}.post-types{display:none}.composer{padding:7px}.editor-wrap,.compose-meta{margin-left:0}.compose-head{grid-template-columns:38px minmax(0,1fr)}.compose-head .post-types{grid-column:1/-1}}

/* ===== V2 visual refinement: softer bezel + stronger mobile-app behavior ===== */
:root{
  --desk:#aeadab;
  --shell:#cacaca;
  --shell-hi:#dddddd;
  --screen:#e0e8d8;
  --screen2:#d6e0cc;
  --screen3:#ccd8c2;
  --screen-edge-left:#777b76;
  --screen-edge-right:#a8aaa5;
  --screen-edge-top:#858985;
  --screen-edge-bottom:#9a9d97;
  --muted:#4d5a4b;
  --line:#6d796b;
  --soft:#aab5a2;
}
body{
  background:
    radial-gradient(circle at 50% -20%,#c9c9c7 0,#adadab 48%,#969694 100%);
}
.device{
  max-width:560px;
  background:#c9c9c7;
  border-color:#4f4f4d;
  border-radius:22px;
  padding:12px;
  box-shadow:
    0 6px 0 #737371,
    0 14px 34px rgba(0,0,0,.22),
    inset 1px 1px 0 #dededc,
    inset -1px -1px 0 #a1a19f;
}
/* Explicit bevel instead of browser inset: right edge is light gray, never white. */
.screen{
  background:var(--screen);
  border:0;
  border-left:4px solid var(--screen-edge-left);
  border-right:4px solid var(--screen-edge-right);
  border-top:4px solid var(--screen-edge-top);
  border-bottom:4px solid var(--screen-edge-bottom);
  min-height:700px;
  position:relative;
}
/* Sticky app chrome: reads much more like an app than a static webpage. */
.appbar{
  position:sticky;
  top:0;
  z-index:40;
  min-height:40px;
  padding:7px 9px;
  background:#d4dfcc;
  box-shadow:0 1px 0 rgba(255,255,255,.35),0 2px 5px rgba(43,50,39,.10);
}
.tabs{
  position:sticky;
  top:40px;
  z-index:39;
  background:var(--screen2);
  box-shadow:0 1px 3px rgba(43,50,39,.08);
}
.tabs a{
  min-height:39px;
  display:grid;
  place-items:center;
  padding:5px 3px;
  font-size:11px;
  letter-spacing:.01em;
}
.tabs a.on{
  background:#1b1d1a;
  color:#dce6cf;
}
.bottom-nav{
  position:sticky;
  bottom:0;
  z-index:40;
  min-height:44px;
  background:var(--screen2);
  box-shadow:0 -1px 4px rgba(43,50,39,.12);
}
.bottom-nav a{
  min-height:44px;
  display:grid;
  place-items:center;
  padding:4px 2px;
  font-size:10px;
  font-weight:700;
}
.graffiti{
  margin-top:0;
  padding:7px 6px;
  background:#d0dac6;
  color:#586052;
}
.toolbar,.feed-controls,.search-box,.article-head{
  background:#cdd7c3;
}
.live-banner{
  background:#d2dcc8;
  border-color:#6f796a;
}
.editor-wrap{
  background:#d6dfcc;
}
.search-input{
  background:#d6dfcc;
}
.reply-box{
  background:#d0dac6;
}
.notification.unread{
  background:#cfd9c5;
}
.post:hover{
  background:rgba(52,65,45,.045);
}
/* Content rhythm */
.post{
  grid-template-columns:34px minmax(0,1fr);
  gap:8px;
  padding:10px 9px 9px;
}
.post-title{
  margin-top:3px;
  font-size:14px;
}
.post-body{
  margin-top:5px;
  line-height:1.47;
}
.post-actions{
  margin-top:7px;
  gap:11px;
}
.latest{
  background:#d0dac6;
  border-color:#7e8877;
  padding:6px 7px;
}
.feed-controls{
  min-height:36px;
  padding:6px 8px;
}
.display-modes button{
  min-height:24px;
  padding:3px 6px;
}
.subtabs button,.subtabs a{
  min-height:34px;
  display:grid;
  place-items:center;
}
/* Avatars: still small, but clearly human rather than letter blocks. */
.avatar{
  --avatar-tone:#7f8b78;
  width:34px;
  height:34px;
  position:relative;
  display:block;
  background:linear-gradient(145deg,#e2e8db,#c2ccb8);
  border-color:#5d6658;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.55);
  color:#394036;
  font-size:8px;
  line-height:1;
  padding-top:24px;
  text-align:center;
  overflow:hidden;
}
.avatar::before{
  content:"";
  position:absolute;
  width:11px;height:11px;
  border-radius:50%;
  top:5px;left:50%;
  transform:translateX(-50%);
  background:var(--avatar-tone);
  border:1px solid rgba(20,24,18,.40);
}
.avatar::after{
  content:"";
  position:absolute;
  width:20px;height:11px;
  left:50%;top:17px;
  transform:translateX(-50%);
  border-radius:10px 10px 3px 3px;
  background:var(--avatar-tone);
  border:1px solid rgba(20,24,18,.30);
}
.avatar.large{
  width:56px;height:56px;
  font-size:9px;
  padding-top:43px;
}
.avatar.large::before{
  width:18px;height:18px;top:8px;
}
.avatar.large::after{
  width:34px;height:19px;top:25px;border-radius:17px 17px 5px 5px;
}
.avatar.mini{
  width:22px;height:22px;
  padding-top:15px;
  font-size:6px;
}
.avatar.mini::before{
  width:7px;height:7px;top:3px;
}
.avatar.mini::after{
  width:13px;height:7px;top:10px;border-radius:7px 7px 2px 2px;
}
.person-zh{--avatar-tone:#687966}
.person-ay{--avatar-tone:#7f756b}
.person-mo{--avatar-tone:#68777b}
.person-li{--avatar-tone:#847f68}
.person-ed{--avatar-tone:#666b72}
.person-ki{--avatar-tone:#72806d}
.compose-head{
  grid-template-columns:34px minmax(0,1fr) auto;
}
.editor-wrap,.compose-meta{
  margin-left:42px;
}
.comment-head{
  grid-template-columns:22px minmax(0,1fr) auto;
}
.list-row{
  grid-template-columns:32px minmax(0,1fr) auto;
  min-height:51px;
  padding:8px 9px;
}
.list-row .avatar{
  width:32px;height:32px;padding-top:23px;
}
.profile-card{
  grid-template-columns:56px minmax(0,1fr);
  padding:12px 10px;
}
.section-title{
  min-height:32px;
  display:flex;
  align-items:center;
  padding:6px 9px;
  background:#c3ceb9;
}
.topic-row,.notification{
  padding:9px;
}
/* More app-like touch states. */
.palm-btn,.tag-chip,.post-actions button,.comment-actions button,.tabs a,.bottom-nav a{
  -webkit-tap-highlight-color:transparent;
}
.palm-btn{
  min-height:30px;
  border-radius:5px;
}
.palm-btn.primary{
  background:#1d211c;
}
@media(max-width:580px){
  html,body{background:#c9c9c7}
  body{
    padding:0;
    min-height:100dvh;
  }
  .device{
    width:100%;
    max-width:none;
    border:0;
    border-radius:0;
    padding:0;
    box-shadow:none;
    background:#c9c9c7;
  }
  .screen{
    min-height:100dvh;
    border-left:0;
    border-right:0;
    border-top:0;
    border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .appbar{
    top:0;
    min-height:calc(42px + env(safe-area-inset-top));
    padding-top:calc(7px + env(safe-area-inset-top));
  }
  .tabs{
    top:calc(42px + env(safe-area-inset-top));
  }
  .bottom-nav{
    padding-bottom:env(safe-area-inset-bottom);
  }
  .hardware{display:none}
  .graffiti{font-size:10px}
  .post{
    padding-left:10px;
    padding-right:10px;
  }
  .composer{
    padding:9px 10px;
  }
  .editor-wrap,.compose-meta{
    margin-left:0;
  }
  .compose-head{
    grid-template-columns:34px minmax(0,1fr);
  }
}


/* ===== V3: restore physical Palm hardware frame ===== */
body{
  padding:22px;
  background:
    radial-gradient(circle at 50% -10%,#d0d0ce 0,#b3b3b1 50%,#999997 100%);
}
.device{
  width:min(560px,100%);
  max-width:560px;
  margin:0 auto;
  padding:14px 14px 12px;
  background:linear-gradient(145deg,#d8d8d6 0,#c4c4c2 58%,#b7b7b5 100%);
  border:2px solid #4c4c4a;
  border-radius:22px;
  box-shadow:
    0 7px 0 #747472,
    0 14px 34px rgba(0,0,0,.24),
    inset 2px 2px 0 #ededeb,
    inset -2px -2px 0 #9a9a98;
}
.screen{
  min-height:700px;
  border-radius:2px;
  overflow:hidden;
  background:var(--screen);
  border-left:4px solid #777b76;
  border-right:4px solid #a6aaa3;
  border-top:4px solid #858985;
  border-bottom:4px solid #969a93;
  box-shadow:
    0 0 0 1px #535751,
    inset 1px 1px 0 rgba(255,255,255,.22);
}
.hardware{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  padding:10px 30px 0;
}
.hw{
  font-size:9px;
  color:#4f4f4d;
}
.hw i{
  width:30px;
  height:15px;
  border-radius:9px;
  background:linear-gradient(#d0d0ce,#b8b8b6);
  border:1px solid #5f5f5d;
  box-shadow:
    inset 1px 1px 0 #ededeb,
    inset -1px -1px 0 #959593;
}
/* mobile keeps a physical shell instead of becoming edge-to-edge */
@media(max-width:580px){
  html,body{
    background:#a9a9a7;
    min-height:100%;
  }
  body{
    padding:6px;
  }
  .device{
    width:100%;
    max-width:none;
    min-height:calc(100dvh - 12px);
    border:1px solid #4c4c4a;
    border-radius:14px;
    padding:7px 7px 8px;
    box-shadow:
      0 3px 0 #737371,
      0 6px 14px rgba(0,0,0,.18),
      inset 1px 1px 0 #e5e5e3,
      inset -1px -1px 0 #9d9d9b;
  }
  .screen{
    min-height:calc(100dvh - 56px);
    border-left:3px solid #747873;
    border-right:3px solid #a3a69f;
    border-top:3px solid #818580;
    border-bottom:3px solid #949890;
    border-radius:1px;
  }
  .appbar{
    min-height:calc(40px + env(safe-area-inset-top));
    padding-top:calc(6px + env(safe-area-inset-top));
  }
  .tabs{
    top:calc(40px + env(safe-area-inset-top));
  }
  .hardware{
    display:grid;
    gap:7px;
    padding:7px 18px 0;
  }
  .hw{
    font-size:0;
  }
  .hw i{
    width:24px;
    height:11px;
    margin-bottom:0;
  }
}


/* ===== V4: flush side edges + square hardware geometry ===== */
.device{
  border-radius:0;
}
.screen{
  border-radius:0;
}
@media(max-width:580px){
  body{
    padding:6px 0;
  }
  .device{
    width:100%;
    max-width:none;
    min-height:calc(100dvh - 12px);
    border-left:1px solid #4c4c4a;
    border-right:1px solid #4c4c4a;
    border-top:1px solid #4c4c4a;
    border-bottom:1px solid #4c4c4a;
    border-radius:0;
    padding:7px 7px 8px;
    box-shadow:
      0 3px 0 #737371,
      0 6px 14px rgba(0,0,0,.18),
      inset 1px 1px 0 #e5e5e3,
      inset -1px -1px 0 #9d9d9b;
  }
  .screen{
    border-radius:0;
  }
}

/* WordPress Classic Theme integration. */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.appbar { position: sticky; top: 0; z-index: 20; }
body.admin-bar .appbar { top: 32px; }
.appbar .brand a { color: inherit; }
.appbar .brand a:hover { text-decoration: underline; }
.screen > .palmx-main { min-height: 0; }
.screen > .palmx-main > .section-title:first-child { margin-top: 0; }
.screen .post-title a:hover, .screen .post-actions a:hover, .screen .comment-actions a:hover { text-decoration: underline; }
.screen .post-body { overflow-wrap: anywhere; }
.screen .post-body img, .screen .page-body img { max-width: 100%; height: auto; }
.screen .post-body ul, .screen .post-body ol, .screen .page-body ul, .screen .page-body ol { padding-left: 1.4em; }
.screen .post-body pre, .screen .page-body pre { overflow-x: auto; padding: 7px; border: 1px solid var(--line); background: rgba(255,255,255,.35); }
.screen .post-body code, .screen .page-body code { font-family: "Courier New", monospace; }
.screen .post-body table, .screen .page-body table { max-width: 100%; border-collapse: collapse; }
.screen .post-body th, .screen .post-body td, .screen .page-body th, .screen .page-body td { border: 1px solid var(--line); padding: 4px 6px; }
.screen .post-body a { text-decoration: underline; }
.screen .post-body .wp-caption { max-width: 100%; }
.screen .post-body .aligncenter { display: block; margin-right: auto; margin-left: auto; }
.screen .post-body .alignleft { float: left; margin: 0 10px 6px 0; }
.screen .post-body .alignright { float: right; margin: 0 0 6px 10px; }
.screen .post-body:after { content: ""; display: table; clear: both; }
.post-type { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .03em; }
.post-title { font-size: 16px; }
.post-body { margin-top: 4px; }
.post-body p { margin: 0 0 6px; }
.post-body p:last-child { margin-bottom: 0; }
.post-actions a, .post-actions button, .comment-actions a, .comment-actions button { cursor: pointer; }
.post-actions .topic-tag { text-decoration: none; }
.inline-comments[hidden] { display: none; }
.inline-comments { grid-column: 2; margin-top: 7px; border-top: 1px dotted var(--line); }
.comment { --depth: 0; position: relative; margin-left: calc(min(var(--depth), 4) * 14px); padding: 7px 4px 6px 0; border-bottom: 1px dotted var(--soft); }
.comment:before { content: ""; position: absolute; left: -8px; top: 0; bottom: 0; border-left: 1px solid var(--soft); }
.comment.depth-0:before { display: none; }
.comment-head { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 6px; align-items: start; }
.comment-head .avatar { width: 26px; height: 26px; }
.comment-body { margin-top: 2px; font-size: 12px; }
.comment-body p { margin: 0 0 5px; }
.comment-body p:last-child { margin-bottom: 0; }
.comment-number { color: var(--muted); font-size: 10px; }
.comment-awaiting-moderation { display: block; margin-top: 3px; color: #7a4b00; font-size: 10px; }
.comment-navigation { margin: 0 8px 8px; }
.comment-navigation a { color: inherit; text-decoration: underline; }
.comments-window { margin-top: 0; }
.comments-window .window-body { padding: 0 0 8px; }
.comments-window .comments-list { padding: 0 8px; }
.comments-window .comment { margin-left: calc(min(var(--depth), 4) * 14px); }
.comments-window .comment-form { margin: 10px 8px 0; padding-top: 9px; border-top: 1px solid var(--line); }
.comments-window .comment-form-comment { margin: 5px 0; }
.comments-window .comment-form-comment label { display: block; margin-bottom: 3px; font-size: 11px; }
.comments-window .comment-form-comment textarea { width: 100%; min-height: 70px; border: 1px solid #333; background: #e7eedf; padding: 6px; resize: vertical; }
.comments-window .form-submit { text-align: right; }
.comments-window .form-submit input { border: 1px solid #333; background: #111; color: var(--screen); padding: 4px 8px; font-weight: 700; }
.palmx-pagination { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border-top: 1px solid var(--line); background: var(--screen2); font-size: 11px; }
.palmx-pagination a { text-decoration: underline; }
.palmx-empty { padding: 24px 8px; text-align: center; color: var(--muted); }
.palmx-form { padding: 8px; border-bottom: 1px solid var(--line); background: var(--screen); }
.palmx-form label { display: block; margin: 4px 0 3px; font-size: 11px; color: var(--muted); }
.palmx-form input[type="text"], .palmx-form input[type="url"], .palmx-form textarea, .palmx-form select { width: 100%; border: 1px solid #333; background: #e7eedf; padding: 5px 6px; }
.palmx-form textarea { min-height: 72px; resize: vertical; }
.palmx-form .form-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: end; }
.palmx-form .form-submit { margin: 7px 0 0; text-align: right; }
.palmx-form button, .palmx-form input[type="submit"] { border: 1px solid #333; background: #111; color: var(--screen); padding: 4px 8px; font-weight: 700; }
.palmx-post-type { display: flex; flex-wrap: wrap; gap: 2px; margin: 7px 0 0 46px; }
.palmx-post-type button { border: 1px solid var(--line); background: var(--screen2); color: #111; padding: 3px 5px; font-size: 10px; }
.palmx-post-type button.on, .palmx-post-type button[aria-pressed="true"] { background: #111; color: var(--screen); }
.palmx-linkcard { display: block; margin-top: 7px; padding: 6px; border: 1px solid #333; background: rgba(255,255,255,.26); }
.palmx-linkcard strong, .palmx-linkcard small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palmx-linkcard small { color: var(--muted); }
.palmx-notification { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 8px; border-bottom: 1px solid var(--soft); }
.palmx-notification.unread { background: rgba(255,255,255,.28); }
.palmx-notification .nmeta { color: var(--muted); font-size: 10px; }
.palmx-profile { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 10px; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.palmx-profile .avatar { width: 66px; height: 66px; font-size: 18px; }
.palmx-profile h1 { margin: 0; font-size: 18px; }
.palmx-profile p { margin: 5px 0; }
.palmx-stats { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 10px; }
.palmx-stats strong { display: block; color: #111; font-size: 13px; }
.palmx-people-row, .palmx-topic-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 8px; border-bottom: 1px solid var(--soft); }
.palmx-topic-row { grid-template-columns: minmax(0, 1fr) auto; }
.palmx-people-row a, .palmx-topic-row a { text-decoration: none; }
.palmx-people-row small, .palmx-topic-row small { display: block; color: var(--muted); font-size: 10px; }
.palmx-people-row .mini-avatar { width: 26px; height: 26px; border: 1px solid #333; background: var(--screen3); display: grid; place-items: center; font-size: 9px; font-weight: 700; }
.palmx-notice { margin: 7px; border: 1px solid #333; background: #edf3e6; padding: 5px 7px; font-size: 11px; }
.palmx-notice a { float: right; }
.palmx-site-page { padding: 10px 8px; }
.palmx-site-page h1 { margin: 0 0 8px; font-size: 19px; }
.palmx-site-page h2 { margin: 14px 0 6px; font-size: 15px; }
.palmx-site-page p { margin: 0 0 9px; }
.palmx-footer { padding: 8px 6px 4px; text-align: center; color: #444; font: 11px/1.4 "Courier New", monospace; }
.palmx-footer a { text-decoration: underline; }
@media (max-width: 782px) { body.admin-bar .appbar { top: 46px; } }
@media (max-width: 580px) { .palmx-post-type { margin-left: 0; } .palmx-form .form-row { grid-template-columns: 1fr; } .palmx-profile { grid-template-columns: 56px minmax(0, 1fr); } .palmx-profile .avatar { width: 56px; height: 56px; } }
.palmx-main { min-width: 0; }
.palmx-main > .section-title { margin-top: 0; }
.section-title h1, .section-title h2 { margin: 0; font-size: 15px; }
.section-title h1 { font-size: 18px; }
.palmx-menu { border-bottom: 1px solid var(--line); background: var(--screen3); }
.palmx-menu-list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.palmx-menu-list li { margin: 0; }
.palmx-menu-list a { display: block; padding: 4px 7px; border-right: 1px solid var(--line); font-size: 10px; }
.palmx-menu-list a:hover, .palmx-menu-list .current-menu-item > a { background: #111; color: var(--screen); }
.palmx-site-page > h1 { margin: 0; padding: 8px; border-bottom: 1px solid var(--line); background: var(--screen2); font-size: 18px; }
.palmx-site-page > .page-body { padding: 10px 8px; }
.palmx-site-page > .page-body h2 { font-size: 15px; }
.palmx-site-page > .page-body p { margin: 0 0 9px; }
.compose-selects { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.compose-selects select, .compose-selects input { max-width: 170px; border: 1px solid var(--line); background: var(--screen2); padding: 3px 4px; font-size: 10px; }
.post-image { margin-top: 7px; }
.post-image img { max-width: 100%; height: auto; }
.post-navigation { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border-top: 1px solid var(--line); background: var(--screen2); font-size: 11px; }
.post-navigation a { text-decoration: underline; }
.core-actions, .core-comment-actions { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.core-action-form { display: inline; margin: 0; }
.core-action-form button, .core-edit summary { border: 0; background: transparent; padding: 0; color: var(--muted); font-size: 10px; text-decoration: underline; cursor: pointer; }
.core-danger { color: #7d1e18 !important; }
.core-edit[open] { display: block; width: 100%; margin-top: 6px; }
.core-edit summary { list-style: none; }
.core-edit summary::-webkit-details-marker { display: none; }
.core-edit-form { display: grid; gap: 4px; margin-top: 5px; padding: 6px; border: 1px solid var(--line); background: rgba(255,255,255,.25); }
.core-edit-form label { color: var(--muted); font-size: 10px; }
.core-edit-form .textfield, .core-edit-form .textarea { width: 100%; border: 1px solid #333; background: #e7eedf; padding: 4px; }
.core-edit-form .textarea { min-height: 60px; resize: vertical; }
.core-form-actions { text-align: right; }
.core-comment-actions { margin-left: 0; }
.palm-btn { border: 1px solid #333; background: var(--screen); padding: 4px 7px; border-radius: 4px; box-shadow: 1px 1px 0 #87927f, inset 1px 1px 0 #f3f7ee; font-weight: 700; font-size: 12px; text-decoration: none; }
.palm-btn:hover { background: var(--screen2); }
.palm-btn.primary { background: #111; color: var(--screen); }
.push { border: 1px solid #333; background: var(--screen); padding: 4px 7px; border-radius: 4px; font-weight: 700; }

/* PalmX interaction layout: the app menu is a compact drawer, while the device controls stay anchored. */
.screen { display: flex; flex-direction: column; }
.screen > .palmx-main { display: flex; flex: 1 0 auto; flex-direction: column; }
.screen > .palmx-main > .graffiti { margin-top: auto; }
.screen > .bottom-nav { margin-top: auto; }
.menu-drawer { position: relative; flex: 0 0 auto; }
.menu-toggle { min-height: 26px; padding: 4px 7px; border: 1px solid #333; background: var(--screen2); color: #111; font-size: 10px; font-weight: 700; cursor: pointer; list-style: none; }
.menu-toggle::-webkit-details-marker { display: none; }
.menu-toggle::before { content: '☰ '; }
.menu-drawer[open] .menu-toggle { background: #111; color: var(--screen); }
.palmx-menu { position: absolute; top: calc(100% + 5px); right: 0; z-index: 60; width: min(310px, calc(100vw - 24px)); max-height: min(70vh, 430px); overflow: auto; border: 1px solid #333; background: var(--screen); box-shadow: 3px 3px 0 rgba(0,0,0,.24); animation: palmx-menu-in .16s ease-out; }
.palmx-menu-list { display: block; list-style: none; margin: 0; padding: 3px 0; }
.palmx-menu-list li { margin: 0; }
.palmx-menu-list a { display: block; min-height: 34px; padding: 8px 10px; border-bottom: 1px solid var(--soft); font-size: 12px; }
.palmx-menu-list li:last-child a { border-bottom: 0; }
.palmx-menu-list a:hover, .palmx-menu-list .current-menu-item > a { background: #111; color: var(--screen); }
.author-link { display: inline-flex; align-items: baseline; gap: 5px; color: inherit; }
.author-link:hover { text-decoration: underline; }
.post .meta > .author-link strong { font-size: 12px; }
.post .meta > .author-link span { color: var(--muted); }
.search-section[hidden] { display: none; }
.subtabs [role="tab"] { min-width: 0; }

@keyframes palmx-menu-in {
 from { opacity: 0; transform: translateY(-4px) translateX(5px); }
 to { opacity: 1; transform: translateY(0) translateX(0); }
}

@media (max-width: 580px) {
 .palmx-menu { width: min(290px, calc(100vw - 20px)); }
 .menu-toggle { min-height: 30px; padding-inline: 8px; }
 .palmx-menu-list a { min-height: 40px; padding: 10px 12px; }
}

/* Japanese interface legibility while retaining the compact Palm OS layout. */
html[lang^="ja"] body { line-height: 1.65; }
html[lang^="ja"] .tabs a,
html[lang^="ja"] .bottom-nav a,
html[lang^="ja"] .post-actions,
html[lang^="ja"] .comment-actions,
html[lang^="ja"] .post .meta,
html[lang^="ja"] .compose-selects select,
html[lang^="ja"] .compose-selects input,
html[lang^="ja"] .post-types button,
html[lang^="ja"] .display-modes button { font-size: 11px; }
html[lang^="ja"] .post-body,
html[lang^="ja"] .page-body { overflow-wrap: anywhere; }

/* Keep the Palm chrome below WordPress's logged-in admin bar. */
body.admin-bar { padding-top: 0; }
body.admin-bar .appbar { top: 0; z-index: 40; }
body.admin-bar .tabs { top: 41px; z-index: 30; }
.appbar { z-index: 40; }

/* The physical controls are part of the Palm shell, including on narrow screens. */
.hardware { display: grid; }
.hw { font-size: 9px; }
.hw i { margin-bottom: 3px; }

@media (max-width: 782px) {
 body.admin-bar { padding-top: 0; }
}

@media (max-width: 580px) {
 body.admin-bar { padding-top: 0; }
 body.admin-bar .appbar { top: 0; }
 body.admin-bar .tabs { top: calc(41px + env(safe-area-inset-top)); }
 .hardware { gap: 7px; padding: 7px 18px 0; }
 .hw { font-size: 9px; }
 .hw i { width: 24px; height: 11px; margin-bottom: 3px; }
}
