/* ========================================================================== Coaching Program — one stylesheet, five screens DESIGN.md: blue and white · blue means "this wants you" · a record, not a dashboard In Apps Script this becomes an included template. ========================================================================== */ :root{ /* ---- colour: one hue, one meaning -------------------------------- */ --b900:#0D3A57; --b700:#1B6699; --b500:#3E8FC4; --b200:#96CAED; --b100:#D8EAF7; --b050:#F4F8FB; /* THREE MEANINGS, AND NO OTHERS: blue — this wants you (a session to log, a request to answer) green — the number is improving red — the number is not (belum bergerak, turun), or the action removes Amber used to carry "bad" alongside red, so "belum bergerak" rendered amber on some screens and red on others. It is gone. */ --up:#157F3C; --up-soft:#E6F4EA; --down:#C0342B; --down-soft:#FBEBE9; --ink:#16222B; --ink2:#55666F; --ink3:#5E7080; --rule:#E3EAEF; --rule2:#EFF3F6; --paper:#FFFFFF; --sel:#CFE6F7; --on-brand:#FFFFFF; /* text ON a --b700 fill */ --on-state:#FFFFFF; /* text ON an --up / --down fill */ --toast-bg:#0D3A57; --toast-ink:#FFFFFF; /* ---- category colour, as Health does it -------------------------- Health gives each category its own hue so you recognise a card before reading it — Activity red, Sleep blue, Nutrition green. Three groups here. The constraint is that three meanings are already spoken for: --b700 is "this wants you", --up is improving, --down is not. A category hue that collides with any of them makes the colour system argue with itself, so these three deliberately avoid blue, green and red. Indigo, teal and FDC's own magenta. They name WHICH MEASURE, never how it is doing. */ --c-perf:#4B45C6; --c-resv:#0E7C80; --c-trmt:#B02878; --scrim:rgba(10,22,30,.35); --sheet-edge:0 -1px 0 rgba(255,255,255,.55),0 -18px 50px -12px rgba(8,26,38,.4); /* Kaca (3 Oktober 2026): tepi cahaya dan kilau, dipakai bilah tab, bilah atas, tombol bulat di bilah, dan sheet — satu bahan untuk semua kontrol yang melayang di atas isi. Isi sendiri (kartu, daftar, grafik) tetap pekat. */ --kaca-tepi:rgba(255,255,255,.75); --kaca-kilau:rgba(255,255,255,.45); /* ---- spacing: a scale, not arbitrary values ---------------------- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; /* ---- motion ------------------------------------------------------ */ --t1:110ms; --t2:200ms; --t3:320ms; --ease:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); /* tiba dengan yakin: thumb, garis grafik, isi sheet */ /* ---- radius: one ladder, four steps ------------------------------ The build carried SIXTEEN distinct values (1,2,3,5,6,7,9,10,11,12,13, 14,16,20,50%,99). Nine of them were within 5px of a neighbour and served no separate purpose — the "mixing radii grammars" the references name as a ban. Each step now means one thing, and nothing sits between two. */ --r-1:6px; /* chips, marks, small badges */ --r-2:10px; /* buttons, inputs, rows, slots */ --r-3:16px; /* cards and panels */ --r-4:22px; /* the sheet */ --r-pill:999px; /* pills only */ --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px); --tab-dasar:max(14px, calc(var(--safe-b) - 12px)); --tab-h:65px; /* tinggi bilah tab: 55 + 2×5 */ --gut:16px; /* 16pt seperti Apple Health (dibandingkan Wang, 3 Okt 2026); dulu 20 */ } /* ========================================================================== Theme. ONE list of dark values, reached three ways: - the OS says dark and the reader has not overridden it - the reader chose dark A reader who chose light is never dragged into dark by the OS. This used to be twelve scattered @media blocks in this file and four more in the shell, nine of which repeated `color:#0A141C` — which is why the theme could not be made switchable without touching sixteen places. It is one place now, and --on-brand carries what those nine were saying. ========================================================================== */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --b900:#DCEAF5; --b700:#7CBCE8; --b500:#5B9BC9; --b200:#35505F; --b100:#22303B; --b050:#171F26; /* a dim, not a blackout */ --ink:#E8EFF4; --ink2:#A6B6C1; --ink3:#8C9CA8; --rule:#2E3B46; --rule2:#232F39; --paper:#1F2931; --sel:#33556E; /* These four were added to the light palette after this block was written and never followed it down, so in dark mode green sat at 2,91:1, red at 2,65:1, and `--ink` on `--down-soft` measured 1,00:1 — the paragraph naming which dentists an import is about to drop was invisible, directly above the save button. Now 6,3:1 / 5,7:1 / 13,6:1. */ --up:#4FBE7A; --up-soft:#16301F; --down:#F08078; --down-soft:#331D1B; --on-brand:#0A141C; --on-state:#0A141C; --toast-bg:#D6E7F3; --toast-ink:#0D1B24; --c-perf:#A7A2FF; --c-resv:#57CBCF; --c-trmt:#F58BC0; --scrim:rgba(0,0,0,.5); --sheet-edge:0 -1px 0 rgba(255,255,255,.07),0 -18px 50px -12px rgba(0,0,0,.6); --kaca-tepi:rgba(255,255,255,.22); --kaca-kilau:rgba(255,255,255,.10); } } :root[data-theme="dark"]{ --b900:#DCEAF5; --b700:#7CBCE8; --b500:#5B9BC9; --b200:#35505F; --b100:#22303B; --b050:#171F26; /* a dim, not a blackout */ --ink:#E8EFF4; --ink2:#A6B6C1; --ink3:#8C9CA8; --rule:#2E3B46; --rule2:#232F39; --paper:#1F2931; --sel:#33556E; /* These four were added to the light palette after this block was written and never followed it down, so in dark mode green sat at 2,91:1, red at 2,65:1, and `--ink` on `--down-soft` measured 1,00:1 — the paragraph naming which dentists an import is about to drop was invisible, directly above the save button. Now 6,3:1 / 5,7:1 / 13,6:1. */ --up:#4FBE7A; --up-soft:#16301F; --down:#F08078; --down-soft:#331D1B; --on-brand:#0A141C; --on-state:#0A141C; --toast-bg:#D6E7F3; --toast-ink:#0D1B24; --c-perf:#A7A2FF; --c-resv:#57CBCF; --c-trmt:#F58BC0; --scrim:rgba(0,0,0,.5); --sheet-edge:0 -1px 0 rgba(255,255,255,.07),0 -18px 50px -12px rgba(0,0,0,.6); --kaca-tepi:rgba(255,255,255,.22); --kaca-kilau:rgba(255,255,255,.10); } *,*::before,*::after{box-sizing:border-box} html{ -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; /* Tarik ke bawah dari puncak halaman = muat ulang, seperti di aplikasi lain (Wang, 1 Oktober 2026). Dulu `none` di kedua sumbu mematikannya. Yang tetap dimatikan: geser menyamping (kembali/maju tak sengaja). */ overscroll-behavior-x:none; } /* Kecuali di tempat orang sedang MENULIS: lembar yang terbuka (ditutup dengan ditarik ke bawah — gerakan yang sama) dan ruang coaching, tempat catatan sesi yang belum disimpan bisa hilang oleh satu tarikan yang terlalu jauh. */ html:has(.sheet-root.on), html:has(.ruang2){overscroll-behavior-y:none} body{ margin:0;background:var(--b050);color:var(--ink); /* 17px, not 16. Apple's one emphatic typographic choice. */ font:400 17px/1.47 var(--sans);letter-spacing:-.022em; font-optical-sizing:auto; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } ::selection{background:var(--sel);color:var(--ink)} :focus-visible{outline:2px solid var(--b700);outline-offset:3px;border-radius:3px} :where(button,a,[role=button]){ touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none; } input,textarea,select{font-size:16px;font-family:inherit} [hidden]{display:none!important} /* ========================================================================== Type — Apple's ladder, measured against it rather than asserted. The previous block claimed to follow Apple's steps and did not. What it actually rendered: weight 500 on labels, which the ladder calls "deliberately absent"; weight 700 at 34px, 22px AND 16px, where headlines are 600 and 700 is reserved; body at 16px, when the one thing Apple is emphatic about is 17px — "the extra pixel gives the page an unmistakable reading, not scanning pace"; and 1.40 leading on body where the ladder says 1.47. The sizes 22 and 15 are not steps either. The ladder is 400 / 600 / 700, no 500. Tracking tightens from 17px up and is never applied at 12px or below. Leading is context-specific: tight on display, 1.47 on body. ========================================================================== */ :root{ --sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; --sans-d:-apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif; } /* 44px, weight 700. The one place 700 is earned: Health sets its figures heavy and this is the number the screen exists for. Everything else is 600. */ .t-fig{font:700 44px/1.02 var(--sans-d);letter-spacing:-.022em} /* Large Title: 34/700, DESIGN.md §6. Peran ini sempat TIDAK punya tipografi sama sekali — hanya margin dan warna — jadi ukurannya datang dari bawaan peramban untuk

, yang kebetulan 32px/bold dan karenanya tidak pernah terlihat salah. Yang terlihat justru akibatnya: tangganya datar, karena judul bagian 17px berdiri di atas isi 17px tanpa satu langkah pun di antara mereka yang benar-benar ditentukan. */ .t-big{ margin:0;color:var(--b900);text-wrap:balance; font:700 34px/1.10 var(--sans-d);letter-spacing:-.024em; } .t-h2 {font:600 17px/1.24 var(--sans);letter-spacing:-.022em} .t-lbl{font:400 14px/1.43 var(--sans);letter-spacing:-.016em} .t-met{font:400 12px/1.33 var(--sans)} .num {font-variant-numeric:tabular-nums} /* ========================================================================== Frame ========================================================================== */ .wrap{max-width:600px;margin:0 auto;padding:0 var(--gut) calc(var(--s7) + var(--safe-b))} .wrap.wide{max-width:920px} /* ========================================================================== Nav bar — a behaviour, not a strip. The large title lives in the content and scrolls away. A compact title rises into the bar as it goes, and the material fades in WITH it — because a blurred surface with nothing behind it is just a coloured banner. Both are driven continuously by --nav-p (0 at rest, 1 collapsed), never by a threshold. ========================================================================== */ /* Sticky, not fixed: #app carries a transform for the sheet's background scale, and a transformed ancestor becomes the containing block for fixed children — which would make this scroll away instead of sticking. */ .nav{ position:sticky;top:0;z-index:30; margin:0 calc(var(--gut) * -1); min-height:calc(var(--safe-t) + 50px); /* TENGAH, bukan rata bawah. Rata bawah menyamakan alas judul dengan alas avatar, dan karena avatar 36px sementara baris teks 20px, titik tengahnya terpaut persis (36-20)/2 = 8px — avatarnya duduk terlalu tinggi terhadap nama yang didampinginya. */ display:flex;align-items:center;gap:var(--s2); /* TEGAK SIMETRIS: 7px di atas dan di bawah, jadi 7 + 36 + 7 = 50, persis min-height-nya. Dulu `var(--safe-t) ... 9px` — nol di atas dan 9 di bawah — dan akibatnya tombol setinggi 36px duduk 3px dari tepi atas layar. Itu terasa sempit, dan pada avatar ia lebih dari terasa: lencana yang menggantung di luar lingkarannya terpotong tepi layar. Selama yang duduk di sudut hanya avatar yang muncul saat digulung, cacat ini jarang terlihat; Daftar orang menaruh tombol di sana sepanjang waktu, dan ia langsung kentara. .nav-c sudah simetris (6px/6px) sejak awal dan tidak pernah begini. Dua bentuk bilah yang sama tingginya tidak punya alasan menaruh isinya di ketinggian yang berbeda. */ padding:calc(var(--safe-t) + 7px) var(--gut) 7px; pointer-events:none; } /* A ROOT bar holds nothing at rest — no back button, no actions — so it must not reserve a bar's worth of height above the title. It keeps its full height as a sticky SURFACE, because that is what the compact title scrolls into, and gives most of that height back to the flow: the large title starts near the top of the page and passes behind the bar as it goes, which is what the material and the --nav-p fade were built for. It was 50px of empty band above every root title. On a phone with a notch the reserved space still clears it: what is given back is the 50px bar, never var(--safe-t). A pushed screen (.nav-c) keeps its height — there the bar has a back button in it and the content genuinely starts below. */ /* Tarikan ini ada karena bilah akar dulu TIDAK memuat apa-apa saat diam — tidak ada tombol kembali, tidak ada tindakan — jadi memesan setinggi bilah di atas tiap judul berarti 50px pita kosong. Ia memberikan sebagian besar tingginya kembali ke aliran halaman. Alasan itu hilang begitu bilahnya berisi sesuatu. Dengan avatar akun di dalamnya, isi yang naik 36px mendarat TEPAT di atasnya: kolom pencarian terbit menimpa avatar, yang terlihat seperti dua benda berebut satu tempat — karena memang begitu. Jadi yang berisi mempertahankan tingginya. */ .nav:not(.nav-c):not(.nav-akun){margin-bottom:-36px} .nav > *{pointer-events:auto} .nav::before{ content:"";position:absolute;inset:0;z-index:-1; /* 86%, SAMA DENGAN .tabbar — dan itu perbaikan atas cacat yang difoto Wang. Dulu 72%, dan pita atas bersandar pada blur-nya untuk menyembunyikan apa yang lewat di bawahnya. Begitu blur-nya tidak jalan, 28% sisanya bukan kabut melainkan jendela: baris pertama kartu di bawahnya terbaca utuh dan tajam menembus pita, bertindihan dengan judul ringkas di atasnya. Bilah bawah memakai 86% sejak awal dan tidak pernah bermasalah. Dua pita dari bahan yang sama di layar yang sama tidak punya alasan memakai dua angka berbeda — dan yang lebih tebal adalah yang terbukti. */ /* Bahan yang sama dengan bilah tab (3 Oktober 2026), sedikit lebih pekat: di sini judul ringkas duduk TEPAT di atas isi yang lewat, jadi 72% — cukup bening untuk terbaca kaca, cukup pekat untuk judulnya. Yang tanpa blur jatuh ke bahan pekat (cadangan di kaki berkas). */ background:color-mix(in srgb,var(--b050) 72%,transparent); backdrop-filter:blur(26px) saturate(200%) brightness(1.04); -webkit-backdrop-filter:blur(26px) saturate(200%) brightness(1.04); box-shadow:inset 0 -.5px 0 color-mix(in srgb,var(--kaca-tepi) 60%,transparent); opacity:var(--nav-p,0); } /* TANPA BLUR, PITANYA HARUS PEKAT. Bahan tembus pandang ini cuma terbaca kalau blur-nya benar-benar jalan. Kalau tidak — peramban yang tidak mendukungnya, atau yang mematikannya demi hemat daya — yang tersisa hanya tirai 86% yang masih meneruskan tulisan di baliknya. Lebih baik pekat dan jelas daripada berlapis dan kacau. Aturan prefers-reduced-transparency di bawah melakukan hal yang sama untuk orang yang MEMINTA-nya; yang ini untuk mesin yang tidak bisa. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .nav::before, .tabbar{background:var(--b050)} } /* Scroll edge as a fade, never a 1px rule — and only once it is overlapping. */ .nav::after{ content:"";position:absolute;left:0;right:0;top:100%;height:16px;z-index:-1; background:linear-gradient(color-mix(in srgb,var(--b050) 86%,transparent),transparent); opacity:var(--nav-p,0); } @media (prefers-reduced-transparency:reduce){ .nav::before{background:var(--b050);backdrop-filter:none;-webkit-backdrop-filter:none} } /* APA PUN YANG DUDUK DI SUDUT memudar bersama judul ringkasnya. Sebelum ini ia satu-satunya benda yang terlihat di bilah layar akar saat istirahat — sebuah tombol melayang di atas pita kosong. Pada layar yang didorong --nav-p selalu 1, jadi di sana tidak ada yang berubah. Dulu aturan ini menyebut `.nav-b.avatar`, karena avatar memang satu-satunya penghuni sudut. Daftar orang menaruh saring dan tambah di sana, dan menyalin ketiga aturan ini untuknya berarti dua perilaku yang harus diingat orang untuk diubah bersama. Yang diatur di sini adalah TEMPATNYA, bukan bendanya. */ /* Sudut kanan bilah atas SELALU terisi, saat diam maupun digulung — seperti Apple Health: avatar (atau tombol halaman) duduk di bilah di atas judul besar, tidak di samping judul itu. Wang membandingkan keduanya berdampingan, 3 Oktober 2026. Salinan di .head-atas disembunyikan di bawah. */ .nav > .nav-sudut{opacity:1} .nav-title{ flex:1;text-align:center;min-width:0; font:600 17px/1.2 var(--sans); letter-spacing:-.012em;color:var(--b900); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; opacity:var(--nav-p,0); transform:translateY(calc(9px * (1 - var(--nav-p,0)))); } /* The pushed screen's bar: one row, always material, title centred between two equal ends so it is centred on the SCREEN and not on what is left over. */ .nav.nav-c{align-items:center;padding-top:calc(var(--safe-t) + 6px);padding-bottom:6px} .nav.nav-c::before, .nav.nav-c::after{opacity:1} .nav.nav-c .nav-title{opacity:1;transform:none} .nav-b{ -webkit-appearance:none;appearance:none;border:0;cursor:pointer; flex:none;width:36px;height:36px;border-radius:50%; display:grid;place-items:center; background:color-mix(in srgb,var(--ink) 7%,transparent); color:var(--b700); transition:background var(--t1) var(--ease),transform var(--t1) var(--ease); } /* Ikon di tombol bulat: 14px, sedikit lebih kecil dari panah kembali (15px). Dulu ukuran panah (9×15) berlaku untuk SEMUA ikon .nav-b, jadi saring, tambah, email, dan tautan di Daftar orang terjepit jadi 9px lebar. */ .nav-b svg{width:14px;height:14px} .nav-b svg[viewBox="0 0 11 18"]{width:9px;height:15px} .nav-b.ghost{background:none;pointer-events:none} /* Tombol bulat DI BILAH ATAS menjadi kaca kecil, seperti avatar dan tombol bilah di Health. Tombol .nav-b di dalam isi (baris Daftar orang) tidak. */ .nav .nav-b:not(.ghost){ background:color-mix(in srgb,var(--paper) 58%,transparent); backdrop-filter:blur(18px) saturate(190%);-webkit-backdrop-filter:blur(18px) saturate(190%); box-shadow:inset 0 1px 0 var(--kaca-tepi), inset 0 0 0 .5px color-mix(in srgb,var(--kaca-tepi) 55%,transparent), 0 4px 12px -6px rgba(10,22,30,.32); } .nav .nav-b.avatar{background:color-mix(in srgb,var(--b100) 78%,transparent)} .nav-b:active{transform:scale(.93)} @media (hover:hover) and (pointer:fine){ .nav-b:not(.ghost):hover{background:color-mix(in srgb,var(--ink) 12%,transparent)} } /* No large title above it, so the subtitle carries the top margin instead. */ .head-c{padding-top:var(--s4)} .head-c .sub{margin:0} .nav-back{ -webkit-appearance:none;appearance:none;background:none;border:0; min-height:44px;padding:0 10px 0 0;margin-left:-10px;cursor:pointer;color:var(--b700); display:inline-flex;align-items:center;gap:3px; font:400 16px/1 var(--sans); } .nav-back:active{opacity:.55} /* Selebar tombol yang digantikannya, 36px — bukan 44. Ia penyeimbang: dengan 44 di kiri dan avatar 36 di kanan, judul yang "di tengah" duduk 4px ke kanan dari tengah sesungguhnya. */ .nav-spacer{width:36px;flex:none} /* The large title, in the content where it belongs. */ .head{padding:var(--s3) 0 0} /* Nama besar dan avatar satu baris. Rata ATAS, bukan tengah: nama yang patah dua baris akan menyeret avatarnya turun ke tengah kedua baris, jauh dari baris yang sebenarnya ia dampingi. */ .head-atas{display:flex;align-items:flex-start;gap:var(--s3)} .head-atas .t-big{flex:1;min-width:0} .head-atas .nav-sudut{display:none} /* (37,4px tinggi baris judul - 36px avatar) / 2 — didudukkan pada baris pertama, bukan pada kotak judulnya. */ .head-atas .nav-b.avatar{flex:none;margin-top:1px; /* Bergantian dengan yang di bilah pada SATU ambang, bukan silang-pudar: bilahnya bening, jadi di tengah silang avatar yang sama tergambar dua kali, bergeser beberapa piksel. Pergantiannya diberi 110ms supaya terbaca sebagai satu benda yang berpindah, bukan berkedip. */ transition:opacity var(--t1) var(--ease)} :root.nav-ringkas .head-atas .nav-sudut{opacity:0} @media (prefers-reduced-motion:reduce){ .head-atas .nav-b.avatar,.nav > .nav-b.avatar{transition:none} } /* Font comes from the ladder above; this only places it. The font used to be restated here at 700/1.08 and, sitting later in the file, quietly overrode the ladder it was supposed to follow. */ .t-big{margin:0;color:var(--b900);text-wrap:balance} .head .sub{margin:var(--s1) 0 0;color:var(--ink3)} /* Baris kedua anak judul: fakta yang sama untuk semua orang, dipisahkan dari bagian yang berubah menurut pembacanya. */ .sub-b{display:block} .head .after{margin-top:var(--s3)} /* ========================================================================== The standing, inside the masthead. It used to sit loose on the ground below the ask, separated from everything by margin — which is why it read as orphaned data. Linear: "sections separate by lift onto surface-1 panels, not by gaps in white." It is bound to the person now, and the air goes AROUND the block rather than through it. ========================================================================== */ /* One card, three parts, hairlines between them — not three cards and not a card inside a card. */ .angka{ margin:var(--s5) 0 0;border-radius:var(--r-3); background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule); overflow:hidden; } .angka-p{padding:var(--s5) var(--s4)} .angka-p .wb{margin-top:var(--s4)} .angka-c{border-top:1px solid var(--rule2);padding-top:var(--s4);padding-bottom:var(--s4)} .angka-c .lede{margin:0} .angka-go{ display:flex;align-items:center;gap:7px;width:100%;min-height:52px; padding:0 var(--s4);border:0;border-top:1px solid var(--rule2); background:none;color:var(--b700);font:inherit;cursor:pointer;text-align:left; transition:background var(--t1) var(--ease); } .angka-go > span:first-of-type{flex:1;font:600 17px/1.24 var(--sans);letter-spacing:-.022em} .angka-n{color:var(--ink3);font-variant-numeric:tabular-nums} .angka-go:active,.angka-go.down{background:var(--b100)} @media (hover:hover) and (pointer:fine){ .angka-go:hover{background:var(--b100)} } /* Movement first — FLOW.md §5. It is the line the eye lands on after the name. */ /* The measure, named where a reader meets it — same grammar as the measure cards: icon, name, category hue. */ .mast-h{display:flex;align-items:center;gap:7px;margin:0 0 var(--s3); font:600 15px/1.2 var(--sans);letter-spacing:-.01em} .mast-h svg{flex:none} .mast-g{margin:0;font:600 17px/1.24 var(--sans); letter-spacing:-.006em;color:var(--ink2)} .mast-g.up{color:var(--up)} .mast-g.dn{color:var(--down)} /* Hero figure: proportional, not tabular. Tabular is for numbers in a column; on a standalone value it widens the digits for no reason. */ .mast-f{margin:2px 0 0; font:700 44px/1.02 var(--sans-d); letter-spacing:-.022em;color:var(--b900)} .mast-s{margin:var(--s2) 0 0;color:var(--ink3)} .mast-g,.mast-f{max-width:100%} /* Twelve weeks, drawn whole. The filled part is what has happened; the rest is the programme ahead, which is room and not a deficit. */ .sp-wrap{display:block} .spark{display:block;margin:var(--s3) 0 0;overflow:visible} .spark-axis{stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke} .spark-tgt{stroke:var(--rule);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke} /* The line and its current point take the colour of whatever they sit in, so a category's chart matches its category. */ /* Weight matched to the rest of the system: a 16px radius and 34px display type do not sit beside a 2px hairline. */ .spark-l{stroke:currentColor;opacity:.75;stroke-width:3;stroke-linecap:round; stroke-linejoin:round;vector-effect:non-scaling-stroke} .spark-d{fill:currentColor;stroke:var(--paper);stroke-width:2; vector-effect:non-scaling-stroke} /* ========================================================================== The reading — a figure with everything it needs to be understood ========================================================================== */ .reading{padding:var(--s6) 0 var(--s5)} .reading .lbl{margin:0 0 var(--s2);color:var(--ink2)} .reading .fig{margin:0;color:var(--b900)} .reading .now{margin:var(--s2) 0 0;color:var(--ink3)} .facts{ margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s1); } .facts div{display:flex;align-items:baseline;gap:var(--s3); font-size:14px;color:var(--ink2)} .facts dt{margin:0} .facts dd{margin:0 0 0 auto;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums} .facts .tgt dd{color:var(--ink3);font-weight:400} .verdict{ margin:var(--s4) 0 0;display:inline-flex;align-items:center;gap:var(--s2); font:600 15px/1 var(--sans);color:var(--b700); } .verdict.flat{color:var(--ink3)} .verdict.stall{color:var(--down)} /* ========================================================================== The line — the only chart in the product ========================================================================== */ .plot{margin:var(--s5) 0 0} .plot svg{display:block;width:100%;height:auto} .plot .ends{display:flex;justify-content:space-between;margin-top:var(--s2); color:var(--ink3);white-space:nowrap} /* ========================================================================== Ledger — the record as one continuous thing, in its own scroll. Twelve sessions must not push the rest of the card off the page, and each one should settle into view rather than stopping halfway. ========================================================================== */ /* On its own surface. It sat loose between two cards, which read as something adrift rather than the record the programme is made of. The spine survives inside it — that is the object, and it is what the card now holds. */ /* Keadaan kosong catatan: sebuah kalimat di atas kertas, bukan kotak berisi ketiadaan. Ia menempati tempat yang sama dengan daftar yang akan menggantikannya, supaya halamannya tidak melompat saat sesi pertama masuk. */ /* Gambar jalan buntu. Ukurannya sengaja sedang: cukup untuk mengatakan halaman ini memang begini, tidak cukup untuk jadi pokok halamannya — kalimatnya yang membawa kabarnya, bukan gambarnya. */ .kosong-gb{display:block;width:76px;height:76px;margin:0 auto var(--s4)} /* .resting adalah kartu yang tidak meminta apa-apa — dua-duanya jalan buntu, dan sekarang keduanya bergambar, jadi isinya ditengahkan seperti .kosong-catatan. Kartu .want-block yang MEMINTA sesuatu tidak ikut: di sana teks rata kiri dan tombolnya yang memimpin. */ .want-block.resting{text-align:center;padding:var(--s6) var(--s4)} /* Di dalam kartu lain: tanpa permukaan sendiri, dan tanpa jarak atas — kartu induknya sudah memberi keduanya. */ .kosong-catatan.polos{margin:0;padding:var(--s5) 0 var(--s2); background:none;box-shadow:none} .kosong-catatan{margin:var(--s5) 0 0;padding:var(--s6) var(--s4); border-radius:var(--r-3);background:var(--paper); box-shadow:inset 0 0 0 1px var(--rule);text-align:center} .kosong-catatan p{margin:0;font:600 17px/1.3 var(--sans);letter-spacing:-.012em; color:var(--ink)} .kosong-catatan .why{margin:var(--s2) 0 0;font:400 15px/1.47 var(--sans); font-weight:400;color:var(--ink3)} .ledger{margin:var(--s5) 0 0} .ledger.card{padding:var(--s5) var(--s4) var(--s4);border-radius:var(--r-3); background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule)} /* The card adds its own side padding, so the spine's indent comes back by the same amount — otherwise the entry header lost 16px and the date wrapped onto two lines. Total indent is what it was before the card. */ .ledger.card .ledger-track{padding-left:var(--s6);padding-top:0;padding-bottom:var(--s3)} .ledger.card .ent::before{left:-18px} /* The node is a disc the thread passes behind, so it has to be filled with the surface it sits on. On the record screen that is the page; inside a card it is the card, and a page-coloured disc on a white card reads as a smudge — most visibly as the 4px halo around the live node. */ .ledger.card{--node:var(--paper)} /* Track padding 32, spine at 14, badge 26 wide: 32 - 31 = 1, centre 14. */ .ledger.card .ent .no{left:-31px} .ledger.card .btn.quiet{width:100%} /* Tidak ada satu pun aturan margin untuk h3 di stylesheet ini — .t-h2 hanya mengatur hurufnya — jadi yang berlaku bawaan peramban: 1em atas dan bawah, 17px pada ukuran ini. Di dalam kartu yang sudah memberi 24px padding, itu menumpuk jadi 41px di atas judul dan 29px di bawahnya, sebelum entri yang sendirinya berpadding 16px lagi. Terlihat "wajar" selama ada tiga entri mengisi kartunya; dengan satu entri, pitanya kosong dan jelas. */ .ledger > h3{display:flex;align-items:baseline;gap:var(--s2);margin:0 0 var(--s2)} .ledger .count{font-size:12px;letter-spacing:.02em;color:var(--ink3);font-variant-numeric:tabular-nums} .ledger-track{position:relative;padding:var(--s3) 0 var(--s5) var(--s7)} /* The thread runs BETWEEN the nodes — it begins at the first and ends at the last, because what it draws is the connection, not a rule down the margin. It used to be one line down the whole track, held off each end by a fixed inset. Those insets could not know where the last node was, so under a card — whose padding differs from the plain track's — the line carried on about 16px past the final node and stopped in the padding: a thread tied to nothing. Per entry, each segment knows its own node. */ .ent::before{ content:"";position:absolute;left:-26px;top:0;bottom:0;width:1px;background:var(--rule); } .ent:first-child::before{top:24px} /* the first node's centre */ .ent:last-child::before{bottom:auto;height:24px} /* stops at the last */ .ent:first-child:last-child::before{display:none} /* one node, nothing to join */ .ent{position:relative;padding:var(--s4) 0 var(--s5)} .ent + .ent{border-top:1px solid var(--rule2)} /* The number IS the node on the spine — not a digit beside the line with a separate dot floating off it. The ground-coloured fill makes the line read as passing behind the marker. */ .ent .no{ position:absolute;left:-39px;top:11px; /* spine sits at 22px; 26/2 = 13 */ width:26px;height:26px;border-radius:50%; display:grid;place-items:center; margin:0; background:var(--node, var(--b050)); box-shadow:inset 0 0 0 1px var(--rule); font-variant-numeric:tabular-nums; color:var(--ink3); } .ent.live .no{ background:var(--b700);color:var(--on-brand);font-weight:700; box-shadow:0 0 0 4px var(--node, var(--b050)); /* the ground clears the line around it */ } /* Two columns while they fit, stacked when they do not. Fixed columns squeezed both halves into two ragged lines each — "Jumat, 18 / September" beside "Hasil per shift Rp / 1.531.117" — where one clean line each is what a narrow screen actually has room for. */ .ent .hd{display:flex;align-items:baseline;gap:0 var(--s3);flex-wrap:wrap;color:var(--ink3)} .ent .hd > span{white-space:nowrap} .ent .hd .amt{margin-left:auto;color:var(--ink2);font-variant-numeric:tabular-nums} @media (max-width:420px){ .ent .hd .amt{margin-left:0} } .ent .said{margin:var(--s3) 0 0;font-size:17px;line-height:1.45;letter-spacing:-.012em} .ent .said em{font-style:italic;color:var(--ink)} .state{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s3);font-size:13px} .state.done{color:var(--ink3)} .state.want{color:var(--b700);font-weight:600} /* ========================================================================== Clusters — a ledger too ========================================================================== */ .clusters{margin:var(--s5) 0 0;width:100%;border-collapse:collapse} .clusters caption{text-align:left;color:var(--ink2);padding-bottom:var(--s3)} .clusters th,.clusters td{ padding:var(--s2) 0;border-bottom:1px solid var(--rule2); font-size:14px;font-weight:400;text-align:left;color:var(--ink); } .clusters td.n{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink2);width:62px} .clusters td.d{text-align:right;font-variant-numeric:tabular-nums;width:64px;font-weight:600} .clusters td.d.up{color:var(--b700)} .clusters td.d.dn{color:var(--down)} .clusters td.d.same{color:var(--ink3);font-weight:400} .clusters tr:last-child th,.clusters tr:last-child td{border-bottom:0} /* ========================================================================== Something wants you ========================================================================== */ .want-block{ margin:var(--s5) 0 0;padding:var(--s5) var(--s4); background:var(--paper);border-radius:var(--r-3); box-shadow:inset 0 0 0 1px var(--rule); } .want-block h2{margin:0 0 var(--s2);font:600 17px/1.35 var(--sans); letter-spacing:-.005em;color:var(--b900)} .want-block .why{margin:0 0 var(--s4);font-size:14px;color:var(--ink2)} /* A card that is not asking for anything. Same box, quieter ink and no trailing space reserved for a button that is not there. */ .want-block.resting h2{color:var(--ink2);font-weight:600} .want-block.resting .why{margin-bottom:0} /* A booked hour that stopped working for somebody who joined the session after it was set. It is not a bad number and it does not remove anything — it is a thing asking to be dealt with, so it takes the same blue as every other "this wants you", rather than inventing a fourth meaning. */ .clash{ margin:0 0 var(--s4);padding:10px 12px;border-radius:var(--r-2); background:var(--b100);color:var(--b700); font-size:13.5px;line-height:1.45;font-weight:600; } .want-block .why:has(+ .clash){margin-bottom:8px} /* One reading, stated as a number. No axis and no line: a chart of a single value implies a passage of time that has not happened. */ .satu{margin:var(--s4) 0 0;display:flex;flex-direction:column;gap:2px} .satu-n{font:600 30px/1.1 var(--sans-d); letter-spacing:-.022em;color:var(--b900);font-variant-numeric:tabular-nums} .satu-l{font-size:13px;color:var(--ink3);letter-spacing:.01em} .quote{margin:0 0 var(--s5);padding-left:var(--s4);border-left:2px solid var(--b200); font-style:italic;color:var(--ink)} .quote .by{display:block;margin-top:var(--s2);font-style:normal;color:var(--ink3); font-size:13px;letter-spacing:.012em} .acts{display:grid;gap:var(--s2)} @media (min-width:400px){.acts.two{grid-template-columns:1fr auto}} .btn{ -webkit-appearance:none;appearance:none; display:flex;align-items:center;justify-content:center;gap:var(--s2); width:100%;min-height:52px;padding:0 var(--s5);border:0;border-radius:var(--r-2); font:600 17px/1 var(--sans);letter-spacing:.004em; /* Ada .btn yang berupa — yang menuju Google, misalnya. Tanpa ini ia satu-satunya tombol di aplikasi yang bergaris bawah. */ text-decoration:none; background:var(--b700);color:var(--on-brand);cursor:pointer; transition:transform var(--t1) var(--ease),background var(--t1) var(--ease); } .btn:active,.btn.down{transform:scale(.975);background:var(--b900)} .btn:active,.btn.down{background:var(--b500)} .btn.ghost{background:transparent;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--rule)} .btn.ghost:active,.btn.ghost.down{background:var(--b100);color:var(--b900)} .btn.quiet{min-height:46px;font-size:15px;background:transparent;color:var(--ink2); box-shadow:inset 0 0 0 1px var(--rule)} .btn.quiet:active,.btn.quiet.down{background:var(--b100);color:var(--b900)} .btn[disabled]{opacity:.45;pointer-events:none} @media (hover:hover) and (pointer:fine){ .btn:hover{background:var(--b900)} .btn.ghost:hover,.btn.quiet:hover{background:var(--b100);color:var(--b900)} } /* ========================================================================== People — a list you read DOWN, not across. Every row shares one Rp 400k–800k scale, so the target tick lands at the same x on all of them and forms a reference line. Bar position is her level; bar length is how far she has moved. Neither needs reading. ========================================================================== */ .people{margin:var(--s6) 0 0} .list-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3); margin:0 0 var(--s3);flex-wrap:wrap} .list-head h2{margin:0;color:var(--ink2)} .legend{display:inline-flex;align-items:center;gap:6px;color:var(--ink3)} .legend i{display:inline-block} .lg-bar{width:16px;height:5px;border-radius:var(--r-pill);background:var(--b700)} .lg-tick{width:2px;height:11px;border-radius:1px;background:var(--ink3);margin-left:6px} .who{ display:block;width:100%;text-align:left; padding:var(--s4) 0 var(--s5);border:0;border-bottom:1px solid var(--rule2); background:none;color:inherit;font:inherit;cursor:pointer; transition:background var(--t1) var(--ease); } .who:last-child{border-bottom:0} .who:active,.who.down{background:var(--rule2)} .who-top{display:flex;align-items:baseline;gap:var(--s3)} .who .nm{margin:0;font:600 16px/1.3 var(--sans); letter-spacing:-.012em;color:var(--b900);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .who-num{margin-left:auto;display:flex;align-items:baseline;gap:8px;flex:none; font-variant-numeric:tabular-nums} .who-num b{font:600 15px/1.2 inherit;color:var(--b900)} .who-num span{font-size:13px;font-weight:600;color:var(--b700)} .who-num span.stall{color:var(--down)} .who .at{display:block;margin:2px 0 0;color:var(--ink3)} .who .st{display:block;margin:var(--s3) 0 0;font-size:14px;line-height:1.4;color:var(--ink2)} .who .st.want{color:var(--b700);font-weight:600} .who .st.stall{color:var(--down);font-weight:600} .rt-track{position:relative;height:5px;margin:var(--s3) 0 0;border-radius:var(--r-pill);background:var(--rule2)} .rt-fill{position:absolute;top:0;bottom:0;border-radius:var(--r-pill);background:var(--b700)} .rt-fill.back{background:var(--down)} .rt-now{position:absolute;top:50%;width:9px;height:9px;border-radius:50%; background:var(--b700);transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--b050)} .rt-now.back{background:var(--down)} .rt-target{position:absolute;top:-4px;bottom:-4px;width:2px;border-radius:1px; background:var(--ink3);opacity:.55;transform:translateX(-50%)} /* ========================================================================== Filter chips ========================================================================== */ .chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s3) 0 0} .chip{ -webkit-appearance:none;appearance:none; padding:7px 14px;border:0;border-radius:var(--r-pill);cursor:pointer; font:600 13px/1 var(--sans);letter-spacing:.012em; background:transparent;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--rule); transition:background var(--t1) var(--ease),color var(--t1) var(--ease); } .chip[aria-pressed=true]{background:var(--b700);color:var(--on-brand);box-shadow:none} .chip:active,.chip.down{transform:scale(.96)} /* ========================================================================== Import grid ========================================================================== */ .drop{ margin:var(--s5) 0 0;padding:var(--s7) var(--s4);text-align:center; border:1.5px dashed var(--b200);border-radius:var(--r-3);background:var(--paper); } .drop p{margin:0 0 var(--s4);color:var(--ink2)} .report{margin:var(--s5) 0 0} .report h2{margin:0 0 var(--s3)} .line{display:flex;gap:var(--s3);align-items:baseline;padding:var(--s3) 0; border-bottom:1px solid var(--rule2);font-size:15px} .line:last-child{border-bottom:0} .line b{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600} .line.warn{color:var(--down)} .line.warn b{color:var(--down)} .swing{margin:var(--s5) 0 0;padding:var(--s4);border-radius:var(--r-2);background:var(--down-soft)} .swing h3{margin:0 0 var(--s2);font:700 14px/1.3 var(--sans);color:var(--down)} .swing p{margin:0;font-size:14px;color:var(--ink)} .swing ul{margin:var(--s3) 0 0;padding-left:18px;font-size:14px} .swing li{margin-bottom:4px;font-variant-numeric:tabular-nums} /* Pilihan, bukan peringatan: calon yang bisa dijadikan kartu. Merah hanya untuk jumlah yang mencurigakan (berkas lengkap, bukan berkas peserta). */ .swing.tawar{background:color-mix(in srgb,var(--b100) 50%,var(--paper))} .swing.tawar h3{color:var(--b900)} .ganti-baris{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)} .ganti-n{margin:0 0 6px} .ganti-baris select.field{height:auto;min-height:44px;padding:10px 12px;font-size:16px} .ganti-akibat{margin:6px 0 0;color:var(--ink2)} /* ========================================================================== Room ========================================================================== */ .room-grid{display:grid;gap:var(--s6)} @media (min-width:760px){.room-grid{grid-template-columns:1fr 1fr;gap:var(--s7)}} .inroom{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s3) 0 0} .ent .inroom{margin:var(--s3) 0 0} .face{ display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border-radius:var(--r-pill); background:var(--b100);font-size:13px;letter-spacing:.012em;color:var(--b900); } .face i{ width:22px;height:22px;border-radius:50%;background:var(--b700);color:var(--on-brand); display:grid;place-items:center;font:700 10px/1 var(--sans);font-style:normal; } /* Asked, not yet answered. Grey rather than blue, because the chip is stating an absence — and the clock says which kind of absence it is. */ .face.wait{background:var(--rule2);color:var(--ink2)} .face.wait i{background:var(--ink3)} .face.wait svg{margin-left:1px;color:var(--ink3)} /* Answered no. Same grey, no clock: nothing is pending any more. */ .face.no{background:var(--rule2);color:var(--ink3)} .face.no i{background:var(--ink3);opacity:.7} .writing{ margin:var(--s4) 0 0;padding:var(--s4);border-radius:var(--r-2); background:var(--b100);border-left:2px solid var(--b700); } .writing .cap{margin:0 0 var(--s2);color:var(--ink2)} .writing p{margin:0;font-style:italic;font-size:16px;line-height:1.5;color:var(--ink)} .caret{display:inline-block;width:2px;height:1.05em;vertical-align:-.15em;margin-left:2px; background:var(--b700);animation:blink 1.1s steps(1,end) infinite} @keyframes blink{50%{opacity:0}} .calm{margin:var(--s5) 0 0;padding:var(--s6) var(--s4);color:var(--ink2)} @media (prefers-reduced-motion:reduce){ *{animation-duration:1ms!important;animation-iteration-count:1!important; transition-duration:1ms!important} } /* ========================================================================== Sheet — a material, not a panel. Depth is driven by the drag, continuously. ========================================================================== */ .sheet-root{position:fixed;inset:0;z-index:60;display:none} .sheet-root.on{display:block} .sheet-scrim{position:absolute;inset:0;background:rgba(8,26,38,.44);opacity:0; backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)} .sheet-panel{ /* Sheet kaca seperti iOS 26: terangkat 8px dari tepi kiri, kanan, dan bawah dengan keempat sudutnya bulat, bening dengan tepi cahaya — bukan papan yang menempel ke dasar layar. */ position:absolute;left:8px;right:8px;bottom:8px; max-width:600px;margin:0 auto; padding:0 20px calc(20px + env(safe-area-inset-bottom,0px)); background:color-mix(in srgb,var(--paper) 76%,transparent); backdrop-filter:blur(34px) saturate(190%) brightness(1.03);-webkit-backdrop-filter:blur(34px) saturate(190%) brightness(1.03); border-radius:32px; /* lebih bulat dari --r-4: ia mengikuti sudut layar */ box-shadow:inset 0 1px 0 var(--kaca-tepi), inset 0 0 0 .5px color-mix(in srgb,var(--kaca-tepi) 55%,transparent), 0 18px 50px -12px rgba(8,26,38,.42); touch-action:none; /* this element owns every axis while dragging */ will-change:transform; } @media (prefers-reduced-transparency:reduce){ .sheet-panel{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none} .sheet-scrim{backdrop-filter:none;-webkit-backdrop-filter:none} } .sheet-grab{width:38px;height:4px;border-radius:var(--r-pill);background:var(--ink3);opacity:.45; margin:10px auto 14px;cursor:grab} .sheet-body h2,.sheet-kepala h2{margin:0 0 6px;font:600 19px/1.25 var(--sans); letter-spacing:-.012em;color:var(--b900)} /* Isi yang lebih tinggi dari layar menggulir di dalam panel; kepalanya (.sheet-kepala, diangkat keluar oleh sheet.js) tetap di tempat dan menjadi pegangan seret. Margin negatif memberi ruang cincin fokus di tepi. */ .sheet-panel{display:flex;flex-direction:column; max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px)} .sheet-kepala{flex:none;padding-bottom:var(--s2)} .sheet-body{min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;margin:0 -6px;padding:0 6px} .sheet-body.gulir{touch-action:pan-y} /* Hanya paragraf TANPA kelas — yaitu kalimat pembuka sebuah sheet. Dulu ini berlaku untuk setiap

anak langsung, dan sebagai pemilih anak ia mengalahkan kelas mana pun: tiap paragraf berkelas yang ditambahkan kemudian diam-diam kehilangan margin dan ukuran hurufnya sendiri. Itulah yang membuat jarak di panel ruang tidak beraturan — 0px di satu tempat, 18px di tempat lain, tanpa sebab yang terbaca di aturannya. */ .sheet-body > p:not([class]){margin:0 0 18px;font-size:14px;color:var(--ink2)} #app{transform-origin:50% 0} #app.lifting{will-change:transform} /* Meet link — only ever rendered when a calendar event exists. */ .meet{display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:12px 14px; border-radius:var(--r-2);background:var(--b100);color:var(--b700)} .meet code{flex:1;min-width:0;font:600 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.01em;color:var(--b900);overflow-wrap:anywhere} /* Copy sits on the end of the link it copies. A 44px target inside a 12px-tall row, so the row keeps its height and the tap area does not. */ .meet-c{ -webkit-appearance:none;appearance:none;border:0;background:none;cursor:pointer; flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-12px -10px -12px 0; border-radius:var(--r-2);color:var(--b700); transition:background var(--t1) var(--ease); } .meet-c:active{background:color-mix(in srgb,var(--b700) 14%,transparent)} @media (hover:hover) and (pointer:fine){ .meet-c:hover{background:color-mix(in srgb,var(--b700) 10%,transparent)} } /* ========================================================================== Catatan sesi — the coach's private record ========================================================================== */ .form{margin-top:var(--s5)} .f{border:0;padding:0;margin:0 0 var(--s6)} .f legend{padding:0;margin:0 0 var(--s3);color:var(--ink2)} .f.req legend::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%; background:var(--b700);margin-left:7px;vertical-align:middle} .hint{margin:var(--s2) 0 0;color:var(--ink3)} .field{width:100%;min-height:104px;padding:13px 15px;border-radius:var(--r-2); border:1px solid var(--rule);background:var(--paper);color:var(--ink); font:400 17px/1.5 var(--sans);resize:vertical; transition:border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)} /* Satu baris kalau memang satu baris. .field dibuat untuk textarea — memakai tinggi itu pada membuat kotak email setinggi kotak karangan, dan bentuk sebuah kolom adalah janji tentang berapa banyak yang diharapkan. */ input.field{min-height:52px;height:52px;resize:none} /* .field dibuat untuk catatan (104px). Pilihan satu baris setinggi isian satu baris. */ select.field{min-height:52px;height:52px;padding-top:0;padding-bottom:0} .field.short{min-height:76px} /* Moved out of prototipe.html's "prototype chrome"