:root{
    --canvas:#F5F1E8;
    --canvas-deep:#EFE9DA;
    --ink:#18211D;
    --muted:#69736B;
    --forest:#17483A;
    --forest-dark:#0E2F26;
    --forest-pale:#DDE9DF;
    --amber:#D49A4A;
    --amber-dark:#B9803A;
    --amber-pale:#F4E4C6;
    --coral:#B95C4D;
    --card:#FFFDF8;
    --line:rgba(24,33,29,0.12);
    --line-soft:rgba(24,33,29,0.07);
    --shadow-sm:0 1px 2px rgba(24,33,29,0.06), 0 1px 1px rgba(24,33,29,0.04);
    --shadow-md:0 6px 18px rgba(24,33,29,0.08), 0 2px 6px rgba(24,33,29,0.05);
    --shadow-lg:0 20px 48px rgba(24,33,29,0.16), 0 4px 14px rgba(24,33,29,0.08);
    --radius-sm:8px;
    --radius-md:14px;
    --radius-lg:20px;
    --sidebar-w:248px;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'DM Sans', sans-serif;
    color:var(--ink);
    background:
      radial-gradient(circle at 1px 1px, rgba(24,33,29,0.035) 1px, transparent 0) 0 0/22px 22px,
      linear-gradient(180deg, var(--canvas) 0%, var(--canvas-deep) 100%);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4,.display{
    font-family:'Fraunces', serif;
    font-weight:600;
    letter-spacing:-0.01em;
    color:var(--ink);
    margin:0;
  }
  p{margin:0;}
  button{font-family:inherit;}
  a{color:inherit;}
  ::selection{background:var(--amber-pale);color:var(--forest-dark);}
  :focus-visible{outline:2px solid var(--forest); outline-offset:2px;}

  .icon{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

  /* ===== App shell ===== */
  .app-shell{
    display:grid;
    grid-template-columns:var(--sidebar-w) 1fr;
    grid-template-rows:auto 1fr;
    grid-template-areas:
      "sidebar header"
      "sidebar main";
    min-height:100vh;
  }

  /* ---- Sidebar ---- */
  .sidebar{
    grid-area:sidebar;
    background:var(--forest-dark);
    color:#EFE7D6;
    padding:28px 18px 24px;
    display:flex;
    flex-direction:column;
    gap:30px;
    position:sticky;
    top:0;
    height:100vh;
    border-right:1px solid rgba(0,0,0,0.25);
  }
  .brand{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:0 8px;
  }
  .brand .mark{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .brand .mark .dot{
    width:11px;height:11px;border-radius:50%;
    background:var(--amber);
    box-shadow:0 0 0 3px rgba(212,154,74,0.25);
  }
  .brand .wordmark{
    font-family:'Fraunces', serif;
    font-size:21px;
    font-weight:600;
    letter-spacing:0.09em;
    color:#FBF7ED;
  }
  .brand .subtitle{
    font-size:12.5px;
    color:#B9C2B8;
    letter-spacing:0.03em;
    padding-left:21px;
  }

  .nav{display:flex;flex-direction:column;gap:4px;}
  .nav-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:#8C9690;
    padding:6px 10px 8px;
  }
  .nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 12px;
    border-radius:10px;
    cursor:pointer;
    color:#D7DED3;
    font-size:14.5px;
    font-weight:500;
    border:1px solid transparent;
    transition:background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    background:none;
    width:100%;
    text-align:left;
  }
  .nav-item .icon{opacity:0.8;}
  .nav-item:hover{background:rgba(255,255,255,0.06); color:#FBF7ED;}
  .nav-item.active{
    background:rgba(212,154,74,0.16);
    border-color:rgba(212,154,74,0.35);
    color:#F7E8C8;
  }
  .nav-item.active .icon{opacity:1; stroke:var(--amber);}
  .nav-item .count{
    margin-left:auto;
    font-size:11.5px;
    background:rgba(255,255,255,0.1);
    padding:2px 8px;
    border-radius:20px;
    color:#E7EEE2;
  }
  .nav-item.active .count{background:var(--amber); color:var(--forest-dark); font-weight:700;}

  .sidebar-foot{
    margin-top:auto;
    padding:14px 12px 0;
    border-top:1px solid rgba(255,255,255,0.08);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .avatar{
    width:34px;height:34px;border-radius:50%;
    background:linear-gradient(145deg,#2E5B4A,#143B2F);
    border:1px solid rgba(212,154,74,0.4);
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:600;color:var(--amber);font-size:14px;
  }
  .sidebar-foot .who{font-size:13px;color:#EFE7D6;font-weight:600;}
  .sidebar-foot .role{font-size:11.5px;color:#92A097;}

  /* ---- Header ---- */
  .topbar{
    grid-area:header;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px 32px;
    background:rgba(245,241,232,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:30;
  }
  .topbar-left{display:flex;flex-direction:column;gap:2px;}
  .topbar-left .eyebrow{font-size:12px;color:var(--muted); letter-spacing:0.04em;}
  .topbar-left .title{font-size:19px;}
  .topbar-right{display:flex;align-items:center;gap:14px;}

  .bell-btn{
    position:relative;
    width:40px;height:40px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--card);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    color:var(--ink);
    transition:box-shadow 0.15s ease, transform 0.15s ease;
  }
  .bell-btn:hover{box-shadow:var(--shadow-sm); transform:translateY(-1px);}
  .bell-btn .badge{
    position:absolute; top:-2px; right:-2px;
    width:16px;height:16px;border-radius:50%;
    background:var(--coral); color:#fff;
    font-size:9.5px; font-weight:700;
    display:flex;align-items:center;justify-content:center;
    border:2px solid var(--canvas);
  }

  .btn{
    display:inline-flex;align-items:center;gap:8px;
    border:none;border-radius:10px;
    padding:11px 18px;
    font-size:13.5px;font-weight:600;
    cursor:pointer;
    transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    white-space:nowrap;
  }
  .btn .icon{width:16px;height:16px;}
  .btn-primary{background:var(--forest); color:#F6EFDD; box-shadow:var(--shadow-sm);}
  .btn-primary:hover{background:var(--forest-dark); transform:translateY(-1px); box-shadow:var(--shadow-md);}
  .btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
  .btn-ghost:hover{background:var(--forest-pale); border-color:transparent;}
  .btn-amber{background:var(--amber); color:#2B1B06;}
  .btn-amber:hover{background:var(--amber-dark); transform:translateY(-1px); box-shadow:var(--shadow-md);}
  .btn-sm{padding:7px 12px; font-size:12.5px; border-radius:8px;}
  .btn-coral{background:var(--coral); color:#FBEAE6;}
  .btn-coral:hover{background:#9f4c3f;}
  .btn:disabled{opacity:0.5; cursor:not-allowed; transform:none !important;}

  /* ---- Main ---- */
  .main{
    grid-area:main;
    padding:26px 32px 60px;
    display:flex;
    flex-direction:column;
    gap:22px;
    min-width:0;
  }
  .view{display:none; flex-direction:column; gap:22px; animation:fadeUp 0.45s ease both;}
  .view.active{display:flex;}
  @keyframes fadeUp{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

  .page-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
  }
  .page-head h1{font-size:30px;}
  .page-head .range{color:var(--muted); font-size:14px; margin-top:4px;}
  .page-head-actions{display:flex; gap:10px; flex-wrap:wrap;}

  /* ---- Content grid ---- */
  .content-grid{
    display:grid;
    grid-template-columns:212px minmax(0,1fr);
    gap:16px;
    align-items:start;
  }
  /* The backlog rail sits beside the calendar; the focus panel spans the full
     content width beneath both, so it is never stranded in the narrow rail. */
  .backlog-card{grid-column:1; grid-row:1;}
  .board-card{grid-column:2; grid-row:1;}
  .focus-card{grid-column:1 / -1; grid-row:2;}

  /* ---- Unscheduled backlog ---- */
  .backlog-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:16px 14px;
    position:sticky;
    top:98px;
  }
  .backlog-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:8px; margin-bottom:4px;
  }
  .backlog-head h3{font-size:15px;}
  .backlog-count{
    font-size:11px; font-weight:700; color:var(--forest);
    background:var(--forest-pale); padding:2px 8px; border-radius:10px;
  }
  .backlog-hint{font-size:11px; color:var(--muted); margin-bottom:12px; line-height:1.35;}
  .backlog-list{
    display:flex; flex-direction:column; gap:8px;
    min-height:88px; padding:6px; border-radius:10px;
    border:1px dashed transparent; transition:background 0.15s ease, border-color 0.15s ease;
  }
  .backlog-list.drag-over{border-color:var(--forest); background:var(--forest-pale);}
  .backlog-empty{
    font-size:11.5px; color:#9AA69D; text-align:center;
    padding:18px 6px; line-height:1.4;
  }
  .backlog-item{
    position:relative;
    display:flex; align-items:flex-start; gap:7px;
    background:var(--canvas);
    border:1px solid var(--line);
    border-left:3px solid var(--muted);
    border-radius:9px;
    padding:9px 10px;
    box-shadow:var(--shadow-sm);
    cursor:grab;
    animation:fadeUp 0.18s ease both;
  }
  .backlog-item:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
  .backlog-item.dragging{opacity:0.45;}
  .backlog-item.priority-high{border-left-color:var(--coral);}
  .backlog-item.priority-medium{border-left-color:var(--amber);}
  .backlog-item.priority-low{border-left-color:var(--forest);}
  .backlog-item .status-dot{
    width:8px; height:8px; border-radius:50%; margin-top:5px; flex:0 0 auto;
    background:var(--muted);
  }
  .backlog-item.priority-high .status-dot{background:var(--coral);}
  .backlog-item.priority-medium .status-dot{background:var(--amber);}
  .backlog-item.priority-low .status-dot{background:var(--forest);}
  .backlog-item .b-body{min-width:0;
    overflow:hidden;}
  .backlog-item .b-title{font-size:12.5px; font-weight:600; line-height:1.3;}
  .backlog-item .b-meta{
    font-size:10.5px; color:var(--muted); margin-top:2px; line-height:1.35;
    overflow-wrap:anywhere;
  }
  .backlog-item .drag-handle{
    position:absolute; top:6px; right:6px; color:#C7CDC3; display:flex;
  }
  .backlog-item .drag-handle .icon{width:12px;height:12px;}

  /* ---- Cloud-save status ---- */
  .save-state{
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:600; color:var(--forest);
    background:var(--forest-pale); border:1px solid rgba(23,72,58,0.16);
    padding:2px 9px; border-radius:20px; margin-top:6px;
  }
  .save-state::before{
    content:""; width:6px; height:6px; border-radius:50%; background:var(--forest);
  }
  .save-state.saving{color:var(--amber-dark); background:var(--amber-pale); border-color:rgba(180,130,40,0.2);}
  .save-state.saving::before{background:var(--amber);}
  .save-state.offline{color:var(--amber-dark); background:var(--amber-pale); border-color:rgba(180,130,40,0.24);}
  .save-state.offline::before{background:var(--amber);}
  .save-state.locked{color:#7A5A12; background:#F6EBD8; border-color:rgba(169,118,27,0.28);}
  .save-state.locked::before{background:#A9761B;}
  .save-state.locked{cursor:pointer;}
  .save-state.error{color:var(--coral); background:#F7E7E3; border-color:rgba(190,80,60,0.24);}
  .save-state.error::before{background:var(--coral);}

  /* ---- Access code modal ---- */
  .token-modal{width:min(420px, 100%);}
  .token-note{font-size:12.5px; color:var(--muted); line-height:1.5; margin:0;}
  .token-modal .field input{
    border:1px solid var(--line); background:#FEFCF6; border-radius:9px;
    padding:10px 11px; font:inherit; color:var(--ink); width:100%;
  }
  .token-modal .field input:focus{border-color:var(--forest); outline:none;}
  .token-error{color:var(--coral); font-size:12px; min-height:16px;}

  /* ---- Quick add composer ---- */
  .composer{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    overflow:hidden;
    transition:max-height 0.35s ease, opacity 0.3s ease;
  }
  .composer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 22px;
    background:var(--forest-pale);
    cursor:pointer;
  }
  .composer-head .left{display:flex; align-items:center; gap:10px;}
  .composer-head h3{font-size:16px;}
  .composer-head .tag{
    font-size:11px; letter-spacing:0.04em; text-transform:uppercase;
    background:var(--forest); color:#EFE7D6; padding:3px 9px; border-radius:20px;
  }
  .chev{transition:transform 0.25s ease;}
  .composer.collapsed .chev{transform:rotate(-90deg);}
  .composer.collapsed .composer-body{max-height:0; padding-top:0; padding-bottom:0; opacity:0;}
  .composer-body{
    padding:20px 22px 22px;
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:14px;
    max-height:460px;
    overflow:hidden;
    opacity:1;
    transition:max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
  }
  .field{display:flex; flex-direction:column; gap:6px; min-width:0;}
  .field label{font-size:12px; color:var(--muted); font-weight:600;}
  .field input[type="text"],
  .field input[type="date"],
  .field select{
    border:1px solid var(--line);
    background:#FEFCF6;
    border-radius:9px;
    padding:10px 11px;
    font-size:13.5px;
    color:var(--ink);
    font-family:inherit;
    width:100%;
  }
  .field input:focus, .field select:focus{border-color:var(--forest);}
  .recurring-option{display:flex;align-items:center;gap:8px;color:var(--ink) !important;cursor:pointer;}
  .recurring-option input{accent-color:var(--forest);width:16px;height:16px;margin:0;}
  .recurring-field{grid-column:1 / -1;}
  .photo-field{display:flex; align-items:center; gap:10px;}
  .photo-drop{
    flex:0 0 auto;
    width:40px;height:40px;border-radius:9px;
    border:1.5px dashed var(--line);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer; color:var(--muted);
    background:#FEFCF6;
    overflow:hidden;
    position:relative;
  }
  .photo-drop img{width:100%;height:100%;object-fit:cover;}
  .photo-drop input{position:absolute; inset:0; opacity:0; cursor:pointer;}
  .photo-hint{font-size:11.5px; color:var(--muted);}
  .composer-actions{
    grid-column:1 / -1;
    display:flex; justify-content:flex-end; gap:10px; margin-top:4px;
  }

  /* ---- Calendar board ---- */
  .board-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:4px 4px 16px;
  }
  .board-header{
    position:relative;
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    padding:22px 18px 26px;
  }
  .board-header::before{
    content:"";
    position:absolute;
    left:34px; right:34px; top:38px;
    height:2px;
    background:linear-gradient(90deg, var(--forest), var(--amber) 60%, var(--forest));
    opacity:0.5;
  }
  .day-head{
    display:flex; flex-direction:column; align-items:center; gap:8px;
    position:relative;
  }
  .day-head .name{font-size:12px; color:var(--muted); letter-spacing:0.05em; text-transform:uppercase;}
  .day-head .marker{
    width:15px;height:15px;border-radius:50%;
    background:var(--card);
    border:2px solid var(--forest);
    z-index:2;
    transition:all 0.2s ease;
  }
  .day-head .num{font-family:'Fraunces',serif; font-size:16px; font-weight:600;}
  .day-head.today .marker{background:var(--amber); border-color:var(--amber); box-shadow:0 0 0 5px var(--amber-pale);}
  .day-head.today .num{color:var(--amber-dark);}
  .day-head .task-count{
    font-size:10.5px; color:var(--forest); background:var(--forest-pale);
    padding:1px 7px; border-radius:10px; min-height:16px;
  }
  .day-head .task-count.zero{opacity:0; visibility:hidden;}

  .board-body{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:10px;
    padding:0 14px;
  }
  .day-col{
    background:rgba(221,233,223,0.28);
    border:1px dashed transparent;
    border-radius:12px;
    min-height:260px;
    padding:8px;
    display:flex;
    flex-direction:column;
    gap:8px;
    transition:background 0.15s ease, border-color 0.15s ease;
  }
  .day-col.drag-over{
    border-color:var(--forest);
    background:var(--forest-pale);
  }
  .day-col.is-empty::after{
    content:"No tasks";
    font-size:11.5px;
    color:#9AA69D;
    text-align:center;
    padding-top:14px;
  }

  .task-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 11px;
    box-shadow:var(--shadow-sm);
    cursor:grab;
    display:flex;
    flex-direction:column;
    gap:7px;
    position:relative;
    transition:box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  }
  .task-card:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
  .task-card.dragging{opacity:0.45;}
  .task-card.done{background:var(--forest-pale); border-color:rgba(23,72,58,0.25);}
  .task-card.done .t-title{text-decoration:line-through; color:var(--muted);}
  .task-card .t-top{display:flex; align-items:flex-start; gap:8px;}
  .task-card .status-dot{
    width:9px;height:9px;border-radius:50%; margin-top:5px; flex:0 0 auto;
    background:var(--muted);
  }
  .task-card.priority-high .status-dot{background:var(--coral);}
  .task-card.priority-medium .status-dot{background:var(--amber);}
  .task-card.priority-low .status-dot{background:var(--forest);}
  .task-card.done .status-dot{background:var(--forest);}
  .task-card .t-title{font-size:13px; font-weight:600; line-height:1.3;}
  .task-card .t-top{padding-right:24px;}
  .task-card .t-loc{font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:4px;}
  .task-card .t-loc .icon{width:12px;height:12px;}
  .task-card .t-assignee{
    display:flex; align-items:center; gap:5px;
    font-size:11px; font-weight:600; color:var(--forest);
    background:var(--forest-pale); border:1px solid rgba(23,72,58,0.16);
    padding:3px 7px; border-radius:6px; width:fit-content; max-width:100%;
  }
  .task-card .t-assignee .icon{width:12px;height:12px;flex:0 0 auto;}
  .task-card .t-assignee span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .task-card .t-assignee.unassigned{
    color:var(--muted); background:var(--canvas);
    border-color:var(--line); font-weight:500; font-style:italic;
  }
  .task-card .t-thumb{
    width:100%; height:56px; border-radius:7px; overflow:hidden; margin-top:2px;
    background:linear-gradient(135deg, #E9D9B7 0%, #C9A565 40%, #7C8F6C 75%, #3E5C47 100%);
    position:relative;
  }
  .task-card .t-thumb img{width:100%;height:100%;object-fit:cover;}
  .task-card .t-thumb::after{
    content:"PHOTO";
    position:absolute; bottom:4px; left:6px;
    font-size:8.5px; letter-spacing:0.08em; color:#fff;
    background:rgba(0,0,0,0.28); padding:1px 5px; border-radius:4px;
  }
  .task-card .t-meta{display:flex; align-items:center; justify-content:space-between; margin-top:1px;}
  .task-card .t-pill{font-size:10px; color:var(--muted);}
  .task-card .t-recurring{font-size:10px; color:var(--forest); font-weight:700; text-transform:uppercase; letter-spacing:0.04em;}
  .task-card .t-moved{
    font-size:10px; color:var(--amber-dark); font-style:italic;
    background:var(--amber-pale); padding:2px 6px; border-radius:6px; width:fit-content;
  }
  .task-card .drag-handle{
    position:absolute; top:8px; right:31px; color:#C7CDC3; display:flex; gap:2px;
  }
  .task-card .drag-handle .icon{width:13px;height:13px;}
  .task-card .t-actions{display:flex; align-items:center; gap:2px; margin-left:auto; position:relative;}
  .task-card .task-edit,
  .task-card .task-delete,
  .task-card .task-assign-me{
    display:flex;align-items:center;justify-content:center;
    width:22px;height:22px;padding:0;border:0;border-radius:6px;
    background:transparent;cursor:pointer;
  }
  .task-card .task-assign-me{color:var(--forest);}
  .task-card .task-assign-me:hover{background:var(--forest-pale);}
  .task-card .task-assign-me .icon{width:14px;height:14px;}
  /* The button is icon-only on the card, so the wording stays available to
     screen readers and to the QA assertions that read card text. */
  .task-card .sr-label{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap; margin:-1px;
  }
  .task-card .task-edit{color:var(--forest);}
  .task-card .task-edit:hover{background:var(--forest-pale);}
  .task-card .task-edit .icon{width:14px;height:14px;}
  .task-card .task-delete{color:var(--coral);}
  .task-card .task-delete:hover{background:#F4E2DE;color:#873C32;}
  .task-card .task-delete .icon{width:14px;height:14px;}

  /* ---- Today's focus panel ---- */
  .focus-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:18px;
    position:sticky;
    top:98px;
  }
  .focus-card h3{font-size:16px;}
  .progress-wrap{display:flex; align-items:center; gap:16px;}
  .ring{width:72px; height:72px; flex:0 0 auto;}
  .ring circle{fill:none; stroke-width:7;}
  .ring .bg{stroke:var(--forest-pale);}
  .ring .fg{stroke:var(--forest); stroke-linecap:round; transition:stroke-dashoffset 0.5s ease;}
  .ring-label{font-size:12px; color:var(--muted);}
  .ring-value{font-family:'Fraunces',serif; font-size:19px; font-weight:600; color:var(--ink);}

  .legend{display:flex; flex-direction:column; gap:7px;}
  .legend-row{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted);}
  .legend-row .sw{width:9px;height:9px;border-radius:50%;}
  .legend-row b{color:var(--ink);}

  .activity-feed{display:flex; flex-direction:column; gap:2px;}
  .activity-feed h4{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px;}
  .activity-list{display:flex; flex-direction:column; gap:0; max-height:280px; overflow-y:auto; padding-right:4px;}
  .activity-item{
    display:flex; gap:10px; padding:9px 0;
    border-bottom:1px solid var(--line-soft);
    font-size:12.5px;
    animation:fadeUp 0.3s ease both;
  }
  .activity-item:last-child{border-bottom:none;}
  .activity-item .a-dot{width:7px;height:7px;border-radius:50%; background:var(--forest); margin-top:5px; flex:0 0 auto;}
  .activity-item .a-text{color:var(--ink);}
  .activity-item .a-time{display:block; color:#9AA69D; font-size:11px; margin-top:1px;}

  /* ---- Complaints view ---- */
  .complaints-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
  }

  /* ---- Shopping list ---- */
  .shopping-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:20px 22px;
    max-width:760px;
  }
  .shopping-add{
    display:grid;
    grid-template-columns:minmax(0,1fr) 76px auto;
    gap:10px;
    margin-bottom:18px;
  }
  .shopping-add input,
  .shopping-add select{
    border:1px solid var(--line);
    background:#FEFCF6;
    border-radius:9px;
    padding:10px 12px;
    font:inherit;
    font-size:13px;
    color:var(--ink);
    width:100%;
    min-width:0;
  }
  .shopping-add input:focus,
  .shopping-add select:focus{border-color:var(--forest); outline:none;}
  .shopping-list{display:flex; flex-direction:column; gap:8px;}
  .shopping-item{
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--canvas);
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px 12px 12px 14px;
    transition:opacity 0.24s ease, transform 0.24s ease, background 0.2s ease;
  }
  /* Ticking an item animates it out; JS then removes it from the list. */
  .shopping-item.checked{
    opacity:0;
    transform:translateX(12px);
    background:var(--forest-pale);
  }
  .shopping-check{
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; flex:0 0 auto; margin:0;
    width:22px; height:22px;
  }
  /* Keep the real checkbox in the accessibility tree and focusable, but let the
     styled box in the label be what is seen and clicked. A zero-sized input is
     not clickable, so it is offset out of view instead. */
  .shopping-check input{
    position:absolute; width:1px; height:1px;
    opacity:0; margin:-1px; overflow:hidden; clip-path:inset(50%);
  }
  .shopping-box{
    width:22px; height:22px; border-radius:6px;
    border:2px solid var(--forest); background:#fff;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.15s ease, border-color 0.15s ease;
  }
  .shopping-box .icon{
    width:14px; height:14px; stroke:#fff; opacity:0;
    transition:opacity 0.15s ease;
  }
  .shopping-check input:checked + .shopping-box{background:var(--forest);}
  .shopping-check input:checked + .shopping-box .icon{opacity:1;}
  .shopping-check input:focus-visible + .shopping-box{
    outline:2px solid var(--forest); outline-offset:2px;
  }
  .shopping-body{min-width:0; flex:1;}
  .shopping-label{font-size:13.5px; font-weight:600; line-height:1.35; overflow-wrap:anywhere;}
  .shopping-meta{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    font-size:11px; color:var(--muted); margin-top:3px;
  }
  .shopping-qty{
    font-weight:700; color:var(--forest);
    background:var(--forest-pale); padding:1px 7px; border-radius:10px;
  }
  .shopping-remove{
    flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; padding:0; border:0; border-radius:7px;
    background:transparent; color:var(--muted); cursor:pointer;
  }
  .shopping-remove:hover{background:#F4E2DE; color:#873C32;}
  .shopping-remove .icon{width:15px; height:15px;}
  .shopping-empty{
    display:flex; align-items:center; gap:10px;
    font-size:13px; color:var(--muted);
    padding:22px 6px; justify-content:center; text-align:center;
  }
  .shopping-empty .icon{width:18px; height:18px; stroke:var(--forest);}
  .shopping-foot{margin-top:14px;}
  .shopping-note{font-size:11.5px; color:var(--muted);}

  /* ---- People ---- */
  .people-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:20px 22px;
    max-width:760px;
  }
  .people-add{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
    gap:10px;
    margin-bottom:18px;
  }
  .people-add input{
    border:1px solid var(--line); background:#FEFCF6; border-radius:9px;
    padding:10px 12px; font:inherit; font-size:13px; color:var(--ink);
    width:100%; min-width:0;
  }
  .people-add input:focus{border-color:var(--forest); outline:none;}
  .people-list{display:flex; flex-direction:column; gap:8px;}
  .people-empty{
    font-size:13px; color:var(--muted); line-height:1.5;
    padding:22px 6px; text-align:center;
  }
  .person-row{
    display:flex; align-items:center; gap:12px;
    background:var(--canvas); border:1px solid var(--line);
    border-radius:10px; padding:11px 14px;
  }
  .person-avatar{
    flex:0 0 auto;
    width:34px; height:34px; border-radius:50%;
    background:var(--forest); color:#F6EFDD;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; letter-spacing:0.02em;
  }
  .person-row .person-body{min-width:0; flex:1;}
  .person-name{
    font-size:13.5px; font-weight:600;
    display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  }
  .person-me{
    font-size:9.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--forest); background:var(--forest-pale);
    padding:1px 7px; border-radius:10px;
  }
  .person-admin{
    font-size:9.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    color:#8A5A16; background:var(--amber-pale); padding:1px 7px; border-radius:10px;
  }
  .person-meta{font-size:11.5px; color:var(--muted); margin-top:3px;}
  .person-actions{display:flex; align-items:center; gap:6px; flex:0 0 auto;}
  .person-remove{
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; padding:0; border:0; border-radius:7px;
    background:transparent; color:var(--muted); cursor:pointer;
  }
  .person-remove:hover{background:#F4E2DE; color:#873C32;}
  .person-remove .icon{width:15px; height:15px;}
  .task-card .t-creator{
    font-size:10px; color:var(--muted); font-style:italic;
  }

  /* ---- Phonebook ---- */
  .phonebook-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:20px 22px;
    max-width:760px;
  }
  .phonebook-add{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:10px;
    margin-bottom:18px;
  }
  .phonebook-add input{
    border:1px solid var(--line); background:#FEFCF6; border-radius:9px;
    padding:10px 12px; font:inherit; font-size:13px; color:var(--ink);
    width:100%; min-width:0;
  }
  .phonebook-add input:focus{border-color:var(--forest); outline:none;}
  .phonebook-add .btn{grid-column:1 / -1; justify-content:center;}
  .phonebook-list{display:flex; flex-direction:column; gap:8px;}
  .phonebook-empty{
    font-size:13px; color:var(--muted); line-height:1.5;
    padding:22px 6px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:8px;
  }
  .phonebook-empty .icon{width:22px; height:22px;}
  .contact-row{
    display:flex; align-items:center; gap:12px;
    background:var(--canvas); border:1px solid var(--line);
    border-radius:10px; padding:11px 14px;
  }
  .contact-avatar{
    flex:0 0 auto;
    width:34px; height:34px; border-radius:50%;
    background:var(--forest-pale); color:var(--forest);
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; letter-spacing:0.02em;
  }
  .contact-body{min-width:0; flex:1;}
  .contact-name{font-size:13.5px; font-weight:600;}
  .contact-meta{font-size:11.5px; color:var(--muted); margin-top:3px;}
  .contact-none{font-style:italic;}
  .contact-phone{
    display:inline-flex; align-items:center; gap:6px;
    margin-top:6px; font-size:12.5px; font-weight:600;
    color:var(--forest); text-decoration:none;
    border-bottom:1px solid transparent;
  }
  .contact-phone:hover{border-bottom-color:currentColor;}
  .contact-phone .icon{width:14px; height:14px;}
  .contact-actions{display:flex; align-items:center; gap:6px; flex:0 0 auto; align-self:flex-start;}
  .contact-remove{
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; padding:0; border:0; border-radius:7px;
    background:transparent; color:var(--muted); cursor:pointer;
  }
  .contact-remove:hover{background:#F4E2DE; color:#873C32;}
  .contact-remove .icon{width:15px; height:15px;}

  /* ---- "Working as" selector ---- */
  .sidebar-foot .who-block{min-width:0; flex:1;}
  .user-label{
    display:block; font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase;
    color:#9FB3A6; margin-bottom:3px;
  }
  .user-select{
    width:100%; max-width:150px;
    background:rgba(255,255,255,0.08); color:#F6EFDD;
    border:1px solid rgba(255,255,255,0.18); border-radius:7px;
    padding:5px 7px; font:inherit; font-size:12.5px; font-weight:600;
    cursor:pointer;
  }
  .user-select:focus{outline:2px solid var(--amber); outline-offset:1px;}
  .user-select option{color:var(--ink); background:#fff;}
  .complaint-add{
    display:grid;
    grid-template-columns:1fr 1fr 1.2fr auto;
    gap:10px;
    padding:16px 22px;
    border-bottom:1px solid var(--line-soft);
    background:var(--canvas-deep);
  }
  .complaint-add input{
    border:1px solid var(--line);
    background:#FEFCF6;
    border-radius:9px;
    padding:10px 12px;
    font:inherit;
    font-size:13px;
    color:var(--ink);
    width:100%;
    min-width:0;
  }
  .complaint-add input:focus{border-color:var(--forest); outline:none;}
  .complaints-head{
    display:grid;
    grid-template-columns:1.6fr 0.8fr 1fr 0.8fr 1.4fr;
    gap:12px;
    padding:14px 22px;
    background:var(--forest-pale);
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--forest-dark);
    font-weight:700;
  }
  .complaint-row{
    display:grid;
    grid-template-columns:1.6fr 0.8fr 1fr 0.8fr 1.4fr;
    gap:12px;
    align-items:center;
    padding:16px 22px;
    border-bottom:1px solid var(--line-soft);
    transition:background 0.2s ease;
  }
  .complaint-row:last-child{border-bottom:none;}
  .complaint-row:hover{background:rgba(221,233,223,0.3);}
  .complaint-row.closed{opacity:0.55;}
  .complaint-row.closed .who{text-decoration:line-through;}
  .c-owner .who{font-weight:600; font-size:13.5px;}
  .c-owner .apt{font-size:12px; color:var(--muted);}
  .c-type{font-size:13px;}
  .c-age{font-size:12.5px; color:var(--muted);}
  .status-chip{
    font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px;
    width:fit-content; letter-spacing:0.02em;
  }
  .status-chip.open{background:#F4E2DE; color:var(--coral);}
  .status-chip.progress{background:var(--amber-pale); color:var(--amber-dark);}
  .status-chip.closed{background:var(--forest-pale); color:var(--forest);}
  .c-actions{display:flex; gap:8px; flex-wrap:wrap;}
  .c-actions .act-delete{color:var(--coral); border-color:#E9CFC9;}
  .c-actions .act-delete:hover{background:#F4E2DE; color:#873C32;}
  .close-note{
    grid-column:1 / -1;
    margin-top:12px;
    background:var(--canvas-deep);
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px 14px;
    display:none;
    gap:10px;
    flex-direction:column;
  }
  .close-note.open{display:flex; animation:fadeUp 0.25s ease both;}
  .close-note textarea{
    width:100%; min-height:56px; resize:vertical;
    border:1px solid var(--line); border-radius:8px; padding:9px 10px;
    font-family:inherit; font-size:13px; background:#fff;
  }
  .close-note .row{display:flex; justify-content:flex-end; gap:8px;}

  /* ---- Modal (weekly report) ---- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(14,22,18,0.46);
    backdrop-filter:blur(2px);
    display:none; align-items:center; justify-content:center; z-index:100;
    padding:20px;
  }
  .modal-overlay.open{display:flex; animation:fadeUp 0.2s ease both;}
  .modal{
    background:var(--card);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    width:min(560px, 100%);
    padding:0;
    overflow:hidden;
  }
  .modal-head{
    padding:22px 26px;
    background:var(--forest);
    color:#F6EFDD;
    display:flex; align-items:center; justify-content:space-between;
  }
  .modal-head h2{font-size:21px; color:#F6EFDD;}
  .modal-head .sub{font-size:12.5px; color:#C9D8CD; margin-top:2px;}
  .modal-close{
    background:rgba(255,255,255,0.12); border:none; color:#F6EFDD;
    width:30px;height:30px;border-radius:50%; cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .modal-body{padding:24px 26px 26px; display:flex; flex-direction:column; gap:18px;}
  .report-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
  .report-stat{
    background:var(--canvas); border:1px solid var(--line); border-radius:12px;
    padding:14px; text-align:center;
  }
  .report-stat .num{font-family:'Fraunces',serif; font-size:26px; font-weight:600;}
  .report-stat .lbl{font-size:11.5px; color:var(--muted); margin-top:3px;}
  .report-stat.green .num{color:var(--forest);}
  .report-stat.amber .num{color:var(--amber-dark);}
  .report-stat.coral .num{color:var(--coral);}
  .report-list{font-size:13px; color:var(--ink); display:flex; flex-direction:column; gap:7px; border-top:1px solid var(--line-soft); padding-top:14px;}
  .report-list .r-row{display:flex; justify-content:space-between; color:var(--muted);}
  .report-list .r-row b{color:var(--ink); font-weight:600;}
  .modal-actions{display:flex; justify-content:flex-end; gap:10px;}
  .delete-modal{width:min(420px, 100%);}
  .delete-modal .modal-body{gap:16px;}
  .delete-modal .field input{
    border:1px solid var(--line);background:#FEFCF6;border-radius:9px;
    padding:10px 11px;font:inherit;color:var(--ink);width:100%;
  }
  .delete-modal .field input:focus{border-color:var(--forest);}
  .delete-error{color:var(--coral);font-size:12px;min-height:16px;}

  /* ---- Edit task modal ---- */
  .edit-modal{width:min(460px, 100%);}
  .edit-modal .modal-body{gap:14px;}
  .edit-modal .field input[type="text"],
  .edit-modal .field select{
    border:1px solid var(--line);background:#FEFCF6;border-radius:9px;
    padding:10px 11px;font:inherit;font-size:13px;color:var(--ink);width:100%;
  }
  .edit-modal .field input[type="text"]:focus,
  .edit-modal .field select:focus{border-color:var(--forest);outline:none;}
  .edit-modal .modal-actions{border-top:1px solid var(--line-soft);padding-top:14px;margin-top:2px;}

  /* ---- Toast ---- */
  .toast-stack{
    position:fixed; bottom:24px; right:24px; z-index:200;
    display:flex; flex-direction:column; gap:10px; align-items:flex-end;
  }
  .toast{
    background:var(--forest-dark); color:#F3EEDD;
    padding:12px 18px; border-radius:10px; box-shadow:var(--shadow-lg);
    font-size:13px; display:flex; align-items:center; gap:10px;
    animation:toastIn 0.25s ease both;
    max-width:320px;
  }
  .toast .icon{stroke:var(--amber);}
  @keyframes toastIn{ from{opacity:0; transform:translateY(8px) scale(0.98);} to{opacity:1; transform:none;} }
  .toast.leaving{animation:toastOut 0.25s ease both;}
  @keyframes toastOut{ to{opacity:0; transform:translateX(16px);} }

  /* ===== Responsive ===== */
  @media (max-width: 1180px){
    .content-grid{grid-template-columns:200px minmax(0,1fr);}
    .board-card{grid-column:2; grid-row:1;}
    .focus-card{grid-column:1 / -1; grid-row:2; position:static;}
    .composer-body{grid-template-columns:1fr 1fr;}
  }
  @media (max-width: 920px){
    .content-grid{grid-template-columns:1fr;}
    .board-card{grid-column:auto; grid-row:auto;}
    .focus-card{grid-column:auto; grid-row:auto;}
    .app-shell{grid-template-columns:1fr; grid-template-areas:"header" "main";}
    .sidebar{
      position:fixed; left:0; right:0; bottom:0; top:auto; height:auto;
      flex-direction:row; align-items:center; padding:10px 14px;
      z-index:50; border-right:none; border-top:1px solid rgba(255,255,255,0.1);
      gap:8px; overflow-x:auto;
    }
    .brand, .nav-label, .sidebar-foot{display:none;}
    .nav{flex-direction:row; gap:6px;}
    .nav-item{flex-direction:column; gap:4px; font-size:10.5px; padding:8px 10px; text-align:center;}
    .nav-item .count{margin-left:0;}
    .main{padding-bottom:110px;}
    .complaints-head{display:none;}
    .complaint-add{grid-template-columns:1fr; gap:8px; padding:14px 18px;}
    .complaint-add input{min-height:44px;}
    .complaint-add .btn{min-height:44px; justify-content:center;}
    .phonebook-add{grid-template-columns:1fr; gap:8px;}
    .phonebook-add input{min-height:44px;}
    .phonebook-add .btn{min-height:44px;}
    .complaint-row{grid-template-columns:1fr; gap:6px; padding:16px 18px;}
    .c-actions{margin-top:6px;}
  }
  @media (max-width: 640px){
    .topbar{padding:14px 16px;}
    .main{padding:18px 16px 110px;}
    .page-head{flex-direction:column; align-items:flex-start;}
    .composer-body{grid-template-columns:1fr;}
    .board-body{grid-template-columns:repeat(7, 200px); overflow-x:auto;}
    .board-header{grid-template-columns:repeat(7,200px); overflow-x:auto; padding-bottom:20px;}
    .board-header::before{display:none;}
    .board-body{padding-bottom:6px;}
  }

  /* Keep the calendar's two grids in one horizontal scrolling coordinate space. */
  .content-grid,
  .board-card,
  .board-scroll,
  .complaints-card,
  .view{
    min-width:0;
  }
  .board-scroll{
    position:relative;
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--forest-pale) transparent;
  }
  /* The board fills the width it is given, but never squeezes a column below a
     readable minimum: on narrow viewports the seven columns overflow into the
     existing horizontal scroll rather than collapsing into unreadable ribbons.
     128px keeps a task card wide enough for a title and location on one line. */
  .board-header,
  .board-body{
    width:max(100%, 980px);
    min-width:980px;
    grid-template-columns:repeat(7,minmax(128px,1fr));
    gap:10px;
    padding-left:14px;
    padding-right:14px;
  }
  .board-header{padding-top:22px;padding-bottom:26px;}
  .board-body{padding-top:0;padding-bottom:0;}
  .calendar-hint{display:none;}

  /* A horizontal-overflow gradient only makes sense where the calendar really
     scrolls; it is toggled on when the board cannot fit its columns. */
  .board-scroll.overflows .calendar-edge{
    display:block;
    position:absolute;
    z-index:3;
    top:0;
    right:0;
    bottom:0;
    width:38px;
    pointer-events:none;
    opacity:1;
    transition:opacity .18s ease;
    background:linear-gradient(90deg,transparent,var(--card) 86%);
  }
  .board-scroll.overflows.at-end .calendar-edge{opacity:0;}
  .board-scroll.overflows .calendar-edge::after{
    position:absolute;
    content:"";
    right:12px;
    top:calc(50% - 5px);
    width:9px;
    height:9px;
    border-top:2px solid var(--forest);
    border-right:2px solid var(--forest);
    transform:rotate(45deg);
  }

  @media (max-width:920px){
    .board-scroll{
      scroll-snap-type:x proximity;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .board-scroll::-webkit-scrollbar{display:none;}
    .board-header,
    .board-body{
      width:844px;
      min-width:844px;
      grid-template-columns:repeat(7,108px);
    }
    .board-header{padding-bottom:20px;}
    .board-header::before{display:none;}
    .day-head,
    .day-col{scroll-snap-align:start;}
    .focus-card{
      position:static;
      top:auto;
      display:grid;
      grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);
      align-items:center;
      gap:14px 20px;
    }
    .focus-card > h3{grid-column:1 / -1;}
    .focus-card .progress-wrap{gap:10px;}
    .focus-card .ring{width:56px;height:56px;}
    .focus-card .legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
    .focus-card .legend-row{gap:5px;font-size:11.5px;}
    .focus-card .activity-feed{grid-column:1 / -1;}
    .focus-card .activity-list{max-height:150px;}
    .task-card .t-top{padding-right:0;}
    .task-card .drag-handle{right:8px;}
    .task-card .t-meta{flex-wrap:wrap;gap:6px;}
    .task-card .task-delete{
      position:static;
      width:40px;
      height:40px;
      flex:0 0 40px;
      margin-left:auto;
    }
    .task-card .task-delete .icon{width:16px;height:16px;}
    .calendar-hint{
      display:block;
      padding:8px 28px 0 12px;
      color:var(--muted);
      font-size:12px;
    }
    .sidebar{
      overflow-x:hidden;
      padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    }
    .nav{
      width:100%;
      min-width:0;
      flex:1;
      justify-content:center;
    }
    .nav-item{
      width:auto;
      min-width:0;
      min-height:48px;
      flex:1 1 0;
      justify-content:center;
      padding:6px 5px;
      line-height:1.2;
      white-space:normal;
      overflow-wrap:anywhere;
    }
    .main{
      padding-bottom:calc(110px + env(safe-area-inset-bottom));
    }
    .complaint-row > *{min-width:0;overflow-wrap:anywhere;}
    .c-actions .btn{
      min-height:44px;
      justify-content:center;
      white-space:normal;
      text-align:center;
    }
    .modal-overlay{
      padding:calc(12px + env(safe-area-inset-top, 0px))
        calc(12px + env(safe-area-inset-right, 0px))
        calc(12px + env(safe-area-inset-bottom, 0px))
        calc(12px + env(safe-area-inset-left, 0px));
      align-items:center;
    }
    .modal{
      max-height:calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
      max-height:calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
      overflow-y:auto;
      overscroll-behavior:contain;
    }
  }

  @media (max-width:640px){
    .topbar{gap:10px;}
    .topbar-left{min-width:0;flex:1;}
    .topbar-left .title{font-size:17px;}
    .topbar-right{gap:8px;}
    .topbar-right .btn{min-height:44px;padding:9px 12px;}
    .main{padding:18px 16px calc(110px + env(safe-area-inset-bottom));}
    .page-head h1{font-size:27px;}
    .composer-head{padding:14px 16px;}
    .composer-body{padding:16px;}
    .board-header,
    .board-body{
      width:844px;
      min-width:844px;
      grid-template-columns:repeat(7,108px);
    }
    .board-header{padding-top:20px;}
    .board-body{padding-bottom:6px;}
    .task-card .task-delete{
      width:44px;
      height:44px;
      flex-basis:44px;
    }
    .task-card .task-delete .icon{width:17px;height:17px;}
    .day-col{min-height:210px;padding:6px;gap:7px;}
    .task-card{padding:9px 8px;gap:6px;}
    .task-card .t-title{font-size:13.5px;line-height:1.35;overflow-wrap:anywhere;}
    .task-card .t-loc{font-size:10.5px;align-items:flex-start;}
    .task-card .t-loc .icon{margin-top:1px;}
    .task-card .t-meta{justify-content:flex-start;}
    .task-card .t-moved{overflow-wrap:anywhere;}
    .c-actions{gap:8px;}
    .c-actions .btn{flex:1 1 140px;min-height:44px;padding:9px 10px;}
    .close-note .row{flex-wrap:wrap;}
    .close-note .row .btn{min-height:44px;}
    .modal-head{padding:16px 18px;}
    .modal-head h2{font-size:19px;}
    .modal-body{padding:18px 18px 20px;gap:14px;}
    .report-grid{gap:8px;}
    .report-stat{padding:10px 8px;}
    .modal-actions{flex-wrap:wrap;}
    .modal-actions .btn{min-height:44px;}
    .toast-stack{
      left:12px;
      right:12px;
      bottom:calc(76px + env(safe-area-inset-bottom));
      align-items:stretch;
    }
    .toast{max-width:100%;}
  }

  @media (max-width:360px){
    .c-actions{flex-direction:column;}
    .c-actions .btn{width:100%;flex:0 0 auto;}
    .topbar{padding-left:12px;padding-right:12px;}
    .topbar-left .title{font-size:15.5px;}
    .topbar-right .btn{padding:8px;}
    .main{padding-left:12px;padding-right:12px;}
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
    }
  }