/* 1本の細い列。上に日付、庭の地面に植物が並び、下に育ちの記録。 */
:root{
  --bg:#F2F8EE; --surface:#FFFFFF; --fg:#24352B; --muted:#587060; --line:#CBDFC4;
  --accent:#2F7A4E; --accent-fg:#FFFFFF;
  --ok:#1F6B4E; --warn:#8A5A00; --late:#8A3C6A;
  --sky:#E7F1E8; --hill:#CFE3CF; --grass:#8CC07C; --grass2:#74A967; --soil:#7A5A44; --soil2:#5F4332; --root:#CBAA8B; --stone:#9A8573;
  --case-a:rgba(255,255,255,.85); --case-b:rgba(205,233,201,.55);
  --demo-bg:#FFF1C9; --demo-fg:#5B4300;
  --na:#E6F4E1; --nb:#CDE9C9; --nfield:rgba(255,255,255,.78);
  --f-body:"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  --f-display:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111B15; --surface:#1B2A21; --fg:#E8F3EA; --muted:#A6BFAE; --line:#2D4636;
    --accent:#8FD6A4; --accent-fg:#10261A;
    --ok:#7FD1AE; --warn:#E3B95C; --late:#E3A0C4;
    --sky:#1B2C24; --hill:#27412F; --grass:#4C8A5E; --grass2:#3D7550; --soil:#4A372C; --soil2:#382A22; --root:#8C7059; --stone:#6C5B4E;
    --case-a:rgba(255,255,255,.05); --case-b:rgba(143,214,164,.1);
    --demo-bg:#4A3A12; --demo-fg:#FFE9A8;
    --na:#223A2B; --nb:#1A2C22; --nfield:rgba(255,255,255,.08);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:16px; line-height:1.7;
  padding-block:24px 56px;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.wrap{max-width:600px;margin:0 auto;display:grid;gap:26px}
header{display:grid;gap:2px}
h1{font-family:var(--f-display);font-weight:700;font-size:1.65rem;line-height:1.4;margin:0;color:var(--accent)}
.date{color:var(--muted);font-size:.875rem;letter-spacing:.05em}
.lead{margin:6px 0 0;color:var(--muted);font-size:.9375rem}

button{font:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* 「見せる用」の帯。サンプル中は、いつも出る */
.demo-band{
  position:sticky;top:0;z-index:5;margin:0 auto;max-width:600px;width:100%;
  background:var(--demo-bg);color:var(--demo-fg);border-radius:0 0 14px 14px;padding:8px 14px;
  font-size:.875rem;font-weight:700;display:flex;gap:10px;align-items:center;justify-content:space-between;
}
.demo-band[hidden]{display:none}
.demo-band button{flex:none;white-space:nowrap;background:transparent;border:1.5px solid currentColor;color:inherit;border-radius:999px;min-height:36px;padding:0 14px;font-weight:700}

.btn{min-height:48px;padding:0 20px;border-radius:999px;border:2px solid transparent;font-weight:700}
.btn-main{background:var(--accent);color:var(--accent-fg)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.links{display:flex;flex-wrap:wrap;gap:4px 18px}
.link-btn{background:none;border:0;color:var(--muted);text-decoration:underline;font-size:.8125rem;padding:6px 0;min-height:36px}

/* 植物 */
.plant{position:relative;display:block;width:100%;aspect-ratio:132/150;border-radius:12px;overflow:hidden;background:var(--sky);border:1px solid var(--line)}
.plant svg{display:block;width:100%;height:100%}
.c-sky{fill:var(--sky)} .c-hill{fill:var(--hill)} .c-grass{fill:var(--grass)} .c-grass2{fill:var(--grass2)}
.c-soil{fill:var(--soil)} .c-soil2{fill:var(--soil2)} .c-stone{fill:var(--stone)} .c-root{stroke:var(--root)}
.tw{transform-box:fill-box;transform-origin:center}
@keyframes sway{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(.8deg)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@media (prefers-reduced-motion: no-preference){
  .tw{animation:twinkle 2.2s ease-in-out infinite}
  .sway{transform-box:fill-box;transform-origin:50% 100%;animation:sway 6s ease-in-out infinite}
  .item{transition:transform .12s ease}
  .item:active{transform:scale(.96)}
}

/* 庭 */
.sec-title{font-family:var(--f-display);font-weight:700;font-size:1.1rem;margin:0 0 4px}
.sec-note{margin:0 0 10px;color:var(--muted);font-size:.875rem}
.case{border:1px solid var(--line);border-radius:20px;padding:14px 8px 8px;background:linear-gradient(180deg,var(--case-a),var(--case-b));display:grid;gap:10px}
.shelf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding-bottom:6px;border-bottom:8px solid var(--grass);border-radius:0 0 8px 8px}
.item{display:grid;justify-items:center;align-content:start;gap:5px;background:none;border:0;padding:6px 2px 8px;color:inherit;border-radius:12px;min-width:0}
.item .plant{width:100%;max-width:74px}
.item-name{font-size:.6875rem;line-height:1.35;font-weight:700;text-align:center;overflow-wrap:anywhere}
.item-st{font-size:.6875rem;display:flex;align-items:center;gap:4px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.s-never{color:var(--muted)}
.s-never .dot{background:transparent;border:1.5px solid currentColor}
.s-fresh{color:var(--ok)}
.s-mid{color:var(--warn)}
.s-long{color:var(--late)}
.round{font-size:.6875rem;font-weight:700;color:var(--accent)}

/* 声かけ・選んだ植物のカード */
.nudge{
  position:relative;overflow:hidden;border-radius:22px;padding:20px 18px 18px;
  background:linear-gradient(170deg,var(--na),var(--nb));display:grid;gap:12px;border:1px solid var(--line);
}
#nudge{scroll-margin-top:64px}
.nudge-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.big-plant{width:120px}
.eyebrow{font-size:.75rem;letter-spacing:.14em;color:var(--muted);margin:0}
.genre-name{font-family:var(--f-display);font-weight:700;font-size:1.5rem;line-height:1.35;margin:0;overflow-wrap:anywhere}
.msg{margin:0;font-size:1.05rem;font-weight:700;line-height:1.6}
.status-line,.growth{margin:0;font-size:.875rem;color:var(--muted)}
.step,.lastmemo{margin:0;font-size:.9375rem;background:var(--nfield);padding:12px 14px;border-radius:14px;overflow-wrap:anywhere}
.step small,.lastmemo small{display:block;font-size:.75rem;letter-spacing:.1em;color:var(--muted)}
.form{display:grid;gap:10px}
.form label{font-size:.8125rem;color:var(--muted)}
textarea.field{min-height:88px;resize:vertical;line-height:1.6}
.item.is-cur .plant{box-shadow:0 0 0 3px var(--accent)}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.2) rotate(-4deg)}70%{transform:scale(.97)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: no-preference){
  .item.pop .plant{animation:pop .7s ease-out}
}

/* 日なたぼっこ(タイマー中だけ、庭をそっと通りすぎるもの。音はなし) */
.timer{display:grid;gap:8px;background:var(--nfield);padding:12px 14px;border-radius:14px}
.timer p{margin:0;font-size:.9375rem}
.timer .small{font-size:.8125rem;color:var(--muted)}
.num{font-variant-numeric:tabular-nums;font-weight:700}
.track{height:10px;border-radius:999px;background:var(--line);overflow:hidden}
.fill{height:100%;width:0;border-radius:999px;background:var(--accent)}
.case-wrap{position:relative}
.ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:20px}
.ambient[hidden]{display:none}
.ambient i{display:block;font-style:normal;width:100%;height:100%}
.ambient svg{display:block;width:100%;height:100%;overflow:visible}
.bird{position:absolute;left:-12%;width:26px;height:14px;opacity:0;color:var(--fg)}
.bird svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.b1{top:5%} .b2{top:18%;width:20px;height:11px}
.bf{position:absolute;left:-8%;width:18px;height:15px;opacity:0}
.bf i{transform-origin:50% 50%}
.bg{position:absolute;left:-24%;width:58px;height:14px;opacity:0}
.bg svg{fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linecap:round}
@keyframes fly{0%{left:-12%;opacity:0}4%{opacity:.6}30%{left:104%;opacity:.6}32%,100%{left:104%;opacity:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes wander-a{0%{left:-8%;top:58%;opacity:0}5%{opacity:.95}12%{left:14%;top:44%}22%{left:30%;top:52%}32%{left:47%;top:40%}42%{left:64%;top:48%}50%{left:82%;top:38%}58%{left:105%;top:44%;opacity:.95}60%,100%{left:105%;opacity:0}}
@keyframes wander-b{0%{left:106%;top:70%;opacity:0}5%{opacity:.95}14%{left:86%;top:62%}26%{left:66%;top:72%}38%{left:48%;top:60%}50%{left:28%;top:68%}60%{left:8%;top:58%}68%{left:-8%;top:64%;opacity:.95}70%,100%{left:-8%;opacity:0}}
@keyframes flap{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.35)}}
@keyframes breeze{0%{left:-24%;opacity:0}10%{opacity:.55}45%{left:108%;opacity:.45}50%,100%{left:108%;opacity:0}}
@media (prefers-reduced-motion: no-preference){
  .ambient:not([hidden]) .b1{animation:fly 38s linear 3s infinite}
  .ambient:not([hidden]) .b2{animation:fly 46s linear 17s infinite}
  .ambient:not([hidden]) .bird i{animation:bob 2.4s ease-in-out infinite}
  .ambient:not([hidden]) .f1{animation:wander-a 46s ease-in-out 6s infinite}
  .ambient:not([hidden]) .f2{animation:wander-b 54s ease-in-out 22s infinite}
  .ambient:not([hidden]) .bf i{animation:flap .9s ease-in-out infinite}
  .ambient:not([hidden]) .g1{top:30%;animation:breeze 24s linear 1s infinite}
  .ambient:not([hidden]) .g2{top:62%;animation:breeze 30s linear 10s infinite}
  .ambient:not([hidden]) .g3{top:80%;animation:breeze 27s linear 18s infinite}
}
@media (prefers-reduced-motion: reduce){.ambient{display:none}}

/* はじめに・使い方 */
#intro ol{margin:0;padding-left:1.4em;display:grid;gap:8px;font-size:.9375rem}
#intro li::marker{color:var(--accent);font-weight:700}
#intro .small{margin:0;font-size:.8125rem;color:var(--muted)}

/* バックアップ */
#backup{display:grid;gap:10px}
#backup .state{margin:0;font-size:.875rem;color:var(--muted)}
#backup .state.nudge-soft{color:var(--warn);font-weight:700}
.confirm{display:grid;gap:8px;background:var(--nfield);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.confirm p{margin:0;font-size:.9375rem;overflow-wrap:anywhere}
.confirm small{color:var(--muted)}
.file-in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* 収穫の棚 */
.shelf-box{border:1px solid var(--line);border-radius:20px;padding:12px 14px;background:linear-gradient(180deg,var(--case-a),var(--case-b));display:grid;gap:4px}
.hrow{display:grid;grid-template-columns:minmax(0,5.5em) minmax(0,1fr);gap:10px;align-items:center;padding:8px 0;border-bottom:8px solid var(--grass);border-radius:0 0 8px 8px}
.hrow:last-of-type{margin-bottom:2px}
.hname{font-size:.75rem;font-weight:700;overflow-wrap:anywhere;line-height:1.35}
.hfruits{display:flex;flex-wrap:wrap;gap:6px}
.fruit-btn{width:44px;height:44px;padding:0;border-radius:12px;border:1px solid var(--line);background:var(--sky);display:block}
.fruit-btn svg{display:block;width:100%;height:100%}
.fruit-btn[aria-pressed="true"]{box-shadow:0 0 0 3px var(--accent)}
.hdetail{margin:6px 0 0;font-size:.875rem;background:var(--nfield);padding:10px 12px;border-radius:12px;overflow-wrap:anywhere}
.hdetail small{display:block;color:var(--muted);font-size:.75rem}

/* ジャンル入力 */
[hidden]{display:none !important}
.setup-list{display:grid;gap:10px;margin:8px 0}
.setup-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:8px;align-items:center}
.setup-row .x-btn:last-child{grid-column:4}
.swatch{width:18px;height:18px;border-radius:50%;border:1px solid var(--line)}
.swatch.off{background:transparent;border:1.5px dashed var(--muted)}
.pill{min-height:44px;padding:0 12px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--muted);font-size:.8125rem;font-weight:700;white-space:nowrap}
.pill.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.rest-box{display:grid;gap:8px}
.rest-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:14px;padding:6px 8px 6px 14px;background:linear-gradient(180deg,var(--case-a),var(--case-b))}
.rest-name{font-weight:700;overflow-wrap:anywhere;min-width:0}
.rest-name small{font-weight:400;color:var(--muted)}
.small-btn{min-height:40px;padding:0 14px;font-size:.875rem;flex:none}
.field{width:100%;min-height:48px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;padding:8px 12px}
.field:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.x-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:1.1rem}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.btn:disabled{opacity:.45;cursor:default}
.flash{margin:8px 0 0;font-size:.9375rem;font-weight:700;color:var(--accent)}

ol.memos{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.memo-item{padding:12px 2px;border-bottom:1px solid var(--line)}
.memo-meta{font-size:.75rem;color:var(--muted);letter-spacing:.04em}
.memo-text{margin:2px 0 0;overflow-wrap:anywhere;white-space:pre-wrap}
.empty{margin:0;color:var(--muted);font-size:.9375rem;padding:10px 2px}
.sync{margin:0;color:var(--muted);font-size:.8125rem}