:root { color-scheme: light; --ink:#252722; --muted:#6f716a; --paper:#f6f3ec; --card:#fffdf8; --line:#dedbd2; --green:#345c48; --green-soft:#e3ede6; --danger:#9b3f35; --gold:#b78636; --shadow:0 12px 34px rgb(45 43 36 / 8%); font-family:Inter,"Noto Sans JP",system-ui,-apple-system,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; color:var(--ink); background:var(--paper); }
button,input,textarea,select { font:inherit; }
button,select { min-height:44px; border:0; border-radius:12px; }
button { padding:0 16px; color:white; background:var(--green); cursor:pointer; }
button:disabled { opacity:.45; cursor:default; }
input,textarea,select { width:100%; min-width:0; border:1px solid var(--line); padding:0 13px; color:var(--ink); background:white; font-size:16px; }
input,select { height:48px; border-radius:12px; }
textarea { min-height:120px; padding-block:13px; border-radius:14px; resize:vertical; }
input:focus,textarea:focus,select:focus,button:focus-visible { outline:3px solid rgb(52 92 72 / 20%); outline-offset:1px; }
[hidden] { display:none !important; }
.shell { min-height:100vh; }
.auth-card { max-width:560px; margin:10vh auto; padding:32px; border:1px solid var(--line); border-radius:24px; background:var(--card); box-shadow:var(--shadow); }
.eyebrow { margin:0 0 7px; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.1em; }
h1,h2,p { overflow-wrap:anywhere; }
h1 { margin:0; font-size:clamp(27px,5vw,38px); line-height:1.15; letter-spacing:-.035em; }
h2 { margin:0; font-size:18px; }
.muted,.section-note,.item-meta,.empty { color:var(--muted); }
#login-form { margin-top:24px; }
#login-form label,.composer label { display:block; margin:13px 0 7px; font-size:13px; font-weight:750; }
.login-row,.quick-add,.composer-row { display:grid; grid-template-columns:1fr auto; gap:9px; margin-top:14px; }
.secondary,.text-button { color:var(--green); background:var(--green-soft); }
#app-view { min-height:100vh; }
.workspace { width:min(920px,100%); margin:auto; padding:38px 24px 100px; }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:26px; }
.topbar-actions { display:flex; gap:6px; }
.text-button { min-height:36px; padding:0 10px; font-size:12px; }
.pull-refresh { position:fixed; z-index:30; top:calc(env(safe-area-inset-top) + 8px); left:50%; min-width:132px; padding:8px 12px; transform:translate(-50%, calc(var(--pull-distance, 0px) - 52px)); border:1px solid var(--line); border-radius:99px; color:var(--green); background:var(--card); box-shadow:var(--shadow); font-size:12px; font-weight:800; text-align:center; transition:transform .18s ease, opacity .18s ease; }
.pull-refresh[aria-hidden="true"] { opacity:0; pointer-events:none; }
.message { min-height:1.4em; margin:10px 2px; font-size:13px; }
.message:empty { display:none; }
.message.error { color:var(--danger); } .message.success { color:var(--green); }
.undo-complete { position:fixed; z-index:40; right:12px; bottom:calc(72px + env(safe-area-inset-bottom)); left:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:520px; margin:auto; padding:10px 12px; border-radius:14px; color:white; background:var(--ink); box-shadow:var(--shadow); font-size:13px; }
.undo-complete button { flex:0 0 auto; min-height:44px; color:white; border:1px solid rgb(255 255 255 / 45%); background:transparent; }
.sync-panel { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px; padding:9px 12px; border:1px solid #e3b8af; border-radius:13px; color:var(--danger); background:#fff4f1; font-size:13px; }
.sync-panel button { min-height:36px; }
.primary-nav { position:fixed; z-index:20; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(5,minmax(44px,1fr)); padding:5px max(4px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left)); border-top:1px solid var(--line); background:rgb(255 253 248 / 96%); backdrop-filter:blur(12px); }
.primary-nav button { display:grid; place-items:center; gap:1px; min-width:44px; min-height:52px; padding:3px 1px; border-radius:10px; color:var(--muted); background:transparent; }
.primary-nav button span { font-size:18px; line-height:1; } .primary-nav button b { font-size:11px; white-space:nowrap; }
.primary-nav button[aria-current="page"] { color:var(--green); background:var(--green-soft); }
.rail-brand { display:none; }
.quick-add { position:sticky; top:8px; z-index:5; margin:0; padding:9px; border:1px solid var(--line); border-radius:17px; background:rgb(246 243 236 / 94%); backdrop-filter:blur(12px); box-shadow:var(--shadow); }
.content-section { margin-top:30px; }
.section-heading { display:flex; align-items:center; gap:8px; }
.section-note { margin:5px 0 10px; font-size:12px; line-height:1.5; }
.count { display:grid; place-items:center; min-width:25px; height:25px; padding:0 7px; border-radius:99px; color:var(--green); background:var(--green-soft); font-size:12px; font-weight:800; }
.card-list { display:grid; gap:9px; margin-top:11px; }
.item-card { display:grid; min-width:0; padding:13px; border:1px solid var(--line); border-radius:15px; background:var(--card); box-shadow:0 4px 14px rgb(45 43 36 / 4%); }
.drag-handle { display:grid; place-items:center; flex:0 0 44px; width:44px; min-width:44px; min-height:44px; padding:0; touch-action:none; color:var(--green); background:transparent; border:0; cursor:grab; opacity:.75; }
.drag-handle:active { cursor:grabbing; }
.item-card.is-dragging { position:relative; z-index:4; opacity:.72; box-shadow:var(--shadow); }
.item-main { min-width:0; flex:1; }
.item-title { margin:0; font-size:15px; font-weight:750; line-height:1.45; }
.item-meta,.item-next { margin:5px 0 0; font-size:11px; line-height:1.55; }
.item-next { font-size:12px; }
.badge-row { display:flex; flex-wrap:wrap; gap:4px; }
.badge { display:inline-flex; align-items:center; min-height:22px; padding:2px 7px; border-radius:99px; color:var(--green); background:var(--green-soft); font-size:10px; font-weight:750; }
.item-controls { display:flex; align-items:center; min-height:44px; margin:7px -5px -5px; }
.item-actions { display:flex; align-items:center; gap:4px; margin-left:auto; }
.complete-button,.task-menu>summary { display:grid; place-items:center; width:44px; min-width:44px; height:44px; min-height:44px; padding:0; border-radius:50%; }
.complete-button { border:1px solid #a8b8ac; color:var(--green); background:transparent; font-size:18px; }
.complete-button:hover { background:var(--green-soft); }
.restore-button { width:auto; padding-inline:12px; border-radius:12px; font-size:13px; font-weight:800; }
.task-menu { position:relative; }
.task-menu>summary { color:var(--muted); background:transparent; cursor:pointer; font-size:21px; font-weight:800; list-style:none; }
.task-menu>summary::-webkit-details-marker { display:none; }
.task-menu[open]>summary { color:var(--green); background:var(--green-soft); }
.task-menu-panel { position:absolute; z-index:10; right:0; bottom:48px; width:min(240px,calc(100vw - 48px)); padding:10px; border:1px solid var(--line); border-radius:13px; background:var(--card); box-shadow:var(--shadow); }
.task-menu-panel label { display:grid; gap:6px; color:var(--muted); font-size:11px; font-weight:750; }
.task-menu-panel select { height:44px; min-height:44px; font-size:14px; }
.empty { margin:0; padding:24px 12px; border:1px dashed var(--line); border-radius:15px; text-align:center; font-size:13px; }
.empty strong,.empty span { display:block; } .empty span { margin-top:5px; font-size:11px; }
.segmented,.chips { display:flex; gap:5px; padding:4px; overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:#ece9e1; scrollbar-width:none; }
.segmented::-webkit-scrollbar,.chips::-webkit-scrollbar { display:none; }
.segmented button,.chips button { flex:1 0 auto; min-width:64px; padding:0 12px; color:var(--muted); background:transparent; }
.segmented button[aria-selected="true"],.chips button[aria-pressed="true"] { color:var(--ink); background:var(--card); box-shadow:0 2px 8px rgb(45 43 36 / 8%); }
.compact { width:max-content; }
#view-board>.segmented { width:max-content; max-width:100%; margin-top:0; padding:3px; border-radius:11px; }
#view-board>.segmented button { min-width:54px; min-height:36px; padding:0 9px; font-size:12px; }
.board-pane { min-width:0; max-width:100%; }
.kanban { display:flex; align-items:flex-start; gap:12px; max-width:100%; margin-top:10px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding-bottom:12px; }
.kanban-column { flex:0 0 min(330px,88vw); max-height:calc(100dvh - 230px); min-height:180px; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; scroll-snap-align:start; padding:0 12px 12px; border:1px solid var(--line); border-radius:17px; background:#efede6; }
.kanban-column>header { position:sticky; z-index:3; top:0; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:52px; margin:0 -12px; padding:8px 12px; border-bottom:1px solid var(--line); background:#efede6; }
.column-title-button { min-width:0; min-height:36px; padding:0 6px; overflow:hidden; color:var(--ink); background:transparent; font-size:18px; font-weight:700; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.column-title-form { display:grid; grid-template-columns:minmax(0,1fr) auto; flex:1; gap:6px; min-width:0; }
.column-title-form input { height:40px; }
.column-title-form button { min-height:40px; padding:0 10px; }
.column-add-card,.add-column { display:grid; place-items:center; min-width:44px; min-height:44px; padding:0; color:var(--green); border:1px dashed #a8b8ac; background:var(--green-soft); font-size:25px; }
.column-add-card { width:100%; margin-top:10px; }
.add-column { flex:0 0 52px; width:52px; scroll-snap-align:start; }
.toolbar { margin:12px 0; }
.gantt-wrap { width:100%; overflow:auto; border:1px solid var(--line); border-radius:16px; background:var(--card); }
.gantt { display:grid; grid-template-columns:150px repeat(var(--days),32px); min-width:max-content; }
.gantt>* { min-height:36px; border-right:1px solid #eeeae1; border-bottom:1px solid #eeeae1; }
.gantt-label { position:sticky; left:0; z-index:2; display:flex; align-items:center; max-width:150px; padding:5px 8px; overflow:hidden; background:var(--card); font-size:11px; font-weight:700; }
.gantt-day { display:grid; place-items:center; color:var(--muted); font-size:10px; }
.gantt-cell { position:relative; } .gantt-cell.active { background:var(--green-soft); } .gantt-cell.active span { position:absolute; z-index:1; top:9px; left:4px; width:140px; overflow:hidden; white-space:nowrap; color:var(--green); font-size:10px; font-weight:800; }
.today-line { box-shadow:inset 2px 0 var(--gold); }
.composer { padding:14px; border:1px solid var(--line); border-radius:17px; background:var(--card); }
.composer-row { grid-template-columns:minmax(0,1fr) auto; }
.calendar-head { display:flex; align-items:center; justify-content:center; gap:18px; margin:18px 0 12px; }
.calendar-head button { width:44px; padding:0; font-size:24px; }
.weekdays,.month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.weekdays span { padding:7px 0; color:var(--muted); text-align:center; font-size:11px; }
.day { position:relative; display:flex; flex-direction:column; align-items:flex-start; min-width:0; min-height:68px; padding:7px; border:1px solid var(--line); border-radius:0; color:var(--ink); background:var(--card); }
.day span { font-size:9px; color:var(--muted); } .day i { color:var(--green); font-size:8px; font-style:normal; }
.day.is-today { outline:2px solid var(--green); outline-offset:-2px; }
.day-detail { margin-top:16px; } .day-detail h2 { margin-bottom:9px; }
.mini-row { display:flex; justify-content:space-between; gap:10px; padding:11px; border-top:1px solid var(--line); font-size:12px; } .mini-row span { color:var(--muted); }
.chat-view { min-height:60vh; } .chat-list { display:grid; gap:8px; min-height:260px; }
.bubble { width:fit-content; max-width:80%; margin:0; padding:10px 13px; border-radius:15px; background:var(--card); } .bubble.me { justify-self:end; color:white; background:var(--green); }
.chat-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px; margin-top:14px; }
.chat-form textarea { min-height:72px; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

body.board-active,body.board-active .shell { height:100dvh; min-height:0; overflow:hidden; }
#app-view.board-active { height:100dvh; min-height:0; overflow:hidden; }
#app-view.board-active .workspace { display:flex; flex-direction:column; height:100dvh; min-height:0; overflow:hidden; }
#app-view.board-active .topbar { flex:0 0 auto; }
#app-view.board-active .topbar { align-items:center; margin-bottom:8px; }
#app-view.board-active .topbar .eyebrow { margin:0 0 2px; font-size:10px; }
#app-view.board-active .topbar h1 { font-size:20px; line-height:1.1; }
#app-view.board-active #view-board { display:flex; flex:1 1 auto; flex-direction:column; min-height:0; overflow:hidden; }
#app-view.board-active #view-board>.segmented { flex:0 0 auto; }
#app-view.board-active .board-pane { flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; }
#app-view.board-active #board-tasks,#app-view.board-active #board-projects { display:flex; flex-direction:column; overflow:hidden; }
#app-view.board-active #board-projects>.section-note { flex:0 0 auto; }
#app-view.board-active .kanban { flex:1 1 auto; height:100%; min-height:0; }
#app-view.board-active #board-projects>.kanban { height:auto; }
#app-view.board-active .kanban-column { height:100%; max-height:none; min-height:0; }
#app-view.board-active #done-list { margin-top:0; }

@media (max-width:599px) {
  .workspace { padding:26px 12px 92px; }
  .auth-card { margin:6vh 12px; padding:23px 18px; }
  .login-row { grid-template-columns:1fr; }
  .quick-add { grid-template-columns:minmax(0,1fr) 62px; padding:7px; }
  .quick-add button { padding:0 8px; }
  .item-card { padding:12px; }
  #app-view.board-active .workspace { padding-top:10px; }
  #app-view.board-active .topbar { margin-bottom:5px; }
  .day { min-height:56px; padding:5px 3px; }
  .day span { overflow:hidden; width:100%; white-space:nowrap; }
  .composer-row { grid-template-columns:minmax(0,1fr) 72px; }
  .chat-form { grid-template-columns:minmax(0,1fr) 56px; }
  .chat-form button { padding-inline:8px; }
}
@media (max-width:380px) {
  .workspace { padding-inline:8px; }
  .topbar { gap:6px; }
  .text-button { padding-inline:7px; }
  .primary-nav button b { font-size:10px; }
}
@media (min-width:600px) and (max-width:1023px) {
  .workspace { width:min(100%,960px); }
  .kanban-column { flex-basis:calc(50% - 6px); }
}
@media (min-width:1024px) {
  #app-view { padding-left:180px; }
  .primary-nav { top:0; right:auto; width:180px; display:flex; flex-direction:column; gap:5px; padding:30px 14px; border-top:0; border-right:1px solid var(--line); }
  .rail-brand { display:block; margin:0 10px 22px; color:var(--green); font-size:20px; font-weight:850; letter-spacing:-.04em; }
  .primary-nav button { display:flex; justify-content:flex-start; grid-template-columns:25px auto; gap:10px; padding:0 13px; }
  .primary-nav button span { width:22px; }
  .primary-nav button b { font-size:13px; }
  .workspace { width:min(1180px,100%); padding:54px 38px 90px; }
  .kanban-column { flex:1 0 260px; }
}
@media (prefers-reduced-motion:reduce) {
  .pull-refresh,.item-card { transition:none; scroll-behavior:auto; }
}

.drag-handle svg { fill: currentColor; pointer-events: none; }
.drag-handle:active { cursor: grabbing; opacity: 1; }
.drag-handle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 8px; }