/* Styles shared by the app screens beyond Home */

/* a card that fills the space under the header */
.panel { position: absolute; top: 60px; bottom: 21px; }
.scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
/* level 8, the letter papers (owner, 9 Oct 2026): a soft pattern under the ruled lines, from the writer's paper through
   the fold to the opened letter and the Album. data-paper on the paper (or round it) sets --pp (the pattern) and --pps
   (its tile); each paper lays its lines over var(--pp, none) */
[data-paper] { --pp: none; --pps: auto; }
[data-paper="dots"] { --pp: radial-gradient(circle, #F4C3BC 0 2px, transparent 2.6px); --pps: 18px 18px; }
[data-paper="gingham"] { --pp: linear-gradient(90deg, rgba(150, 192, 162, 0.2) 50%, transparent 0), linear-gradient(rgba(150, 192, 162, 0.2) 50%, transparent 0); --pps: 16px 16px, 16px 16px; }
[data-paper="blossom"] { --pp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cg fill='%23F7C9D3'%3E%3Ccircle cx='11' cy='9.4' r='2.3'/%3E%3Ccircle cx='13.5' cy='11.2' r='2.3'/%3E%3Ccircle cx='12.5' cy='14.1' r='2.3'/%3E%3Ccircle cx='9.5' cy='14.1' r='2.3'/%3E%3Ccircle cx='8.5' cy='11.2' r='2.3'/%3E%3Ccircle cx='34' cy='31.4' r='2.3'/%3E%3Ccircle cx='36.5' cy='33.2' r='2.3'/%3E%3Ccircle cx='35.5' cy='36.1' r='2.3'/%3E%3Ccircle cx='32.5' cy='36.1' r='2.3'/%3E%3Ccircle cx='31.5' cy='33.2' r='2.3'/%3E%3C/g%3E%3Cg fill='%23F2D27A'%3E%3Ccircle cx='11' cy='12' r='1.3'/%3E%3Ccircle cx='34' cy='34' r='1.3'/%3E%3C/g%3E%3Cg fill='%23CFE0C3'%3E%3Cellipse cx='17' cy='15' rx='2.2' ry='1' transform='rotate(30 17 15)'/%3E%3Cellipse cx='28' cy='31' rx='2.2' ry='1' transform='rotate(30 28 31)'/%3E%3C/g%3E%3C/svg%3E"); --pps: 46px 46px; }
/* a paper's own swatch (the write step's choice) */
.pp-swatch { background-color: #FFFDF7; background-image: var(--pp, none); background-size: var(--pps, auto); }
.row { display: flex; align-items: center; gap: 8px; }
.h2 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.15; }
.big-title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.1; }
.body { font-size: 13px; font-weight: 700; color: #4A423B; line-height: 1.3; }
.note-box { padding: 8px 12px; border-radius: 12px; background: #FFF6D9; border: 1.5px dashed var(--ink); font-size: 13px; font-weight: 800; }
.tile-btn { display: flex; flex-direction: column; text-align: left; padding: 6px 6px 7px; border-radius: 12px; border: 2px solid var(--ink); background: var(--card); box-shadow: var(--edge); color: var(--ink); }
.tile-btn.on { background: var(--honey-soft); box-shadow: var(--edge), 0 0 0 3px var(--honey); }
.tick { position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border-radius: 13px; background: var(--honey); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.steps { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 18px; border: 2px solid var(--ink); background: var(--card); box-shadow: var(--edge); }
.step { height: 28px; padding: 0 10px 0 4px; border-radius: 14px; display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; white-space: nowrap; border: 2px solid transparent; background: transparent; color: var(--ink); }
.step.now { background: var(--honey); border-color: var(--ink); }
.step.todo { color: var(--label); }
.step .n { width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: var(--ink); color: var(--card); }
.step.todo .n { background: transparent; border: 1.5px solid #B8AA95; color: var(--label); }
.chev { color: #B8AA95; display: flex; }
.toggle { width: 46px; height: 28px; border-radius: 14px; border: 2px solid var(--ink); background: var(--disabled); position: relative; padding: 0; flex: none; }
.toggle::before { content: ""; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 10px; background: #FFFFFF; border: 2px solid var(--ink); transition: left .15s; box-sizing: border-box; }
.toggle.on { background: var(--sage); }
.toggle.on::before { left: 20px; }