/* Low-fidelity Zakat page wireframes. Greyscale on purpose: structure first, styling later.
   One accent (MH blue) marks interactive elements; yellow notes explain the thinking. */

:root {
  --ink: #1f2328;
  --mid: #5b6169;
  --line: #dde0e3;
  --box: #eef0f2;
  --box-2: #e4e7ea;
  --paper: #fafafa;
  --accent: #1a9ec4;
  --note: #fff3b0;
  --note-ink: #5c4a00;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.5 var(--font); }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }

.Wrap { width: min(100% - 32px, 1120px); margin-inline: auto; }

/* Tool bar above every wireframe */
.Tool {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 10px 16px; background: #1f2328; color: #fff; font-size: 13px;
}
.Tool b { font-weight: 600; }
.Tool nav { display: flex; flex-wrap: wrap; gap: 4px; margin-inline-start: auto; }
.Tool a, .Tool button { padding: 5px 10px; border: 1px solid #444b53; border-radius: 6px; background: none; color: #fff; text-decoration: none; }
.Tool a[aria-current='page'] { background: #fff; color: #1f2328; }
@media (max-width: 700px) { .Tool { position: static; } }
.Tool button[aria-pressed='true'] { background: var(--note); color: var(--note-ink); border-color: var(--note); }

/* Site frame */
.Site { border-bottom: 1px solid var(--line); background: #fff; }
.Site .Wrap { display: flex; align-items: center; gap: 16px; height: 56px; }
.Logo { width: 120px; height: 22px; background: var(--box-2); border-radius: 4px; }
.Navs { display: flex; gap: 14px; margin-inline-start: auto; color: var(--mid); font-size: 13px; }
.Navs span:nth-child(2) { color: var(--ink); font-weight: 600; text-decoration: underline; }
.Cta { padding: 6px 14px; border: 2px solid var(--ink); border-radius: 6px; font-weight: 600; font-size: 13px; }

.Sec { padding-block: 44px; position: relative; }
.Sec--tint { background: #f3f4f5; }
.Label { display: inline-block; justify-self: start; width: fit-content; margin-bottom: 8px; color: #8a9097; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.H1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; font-weight: 700; }
.H2 { font-size: 24px; line-height: 1.2; font-weight: 700; margin-bottom: 6px; }
.H3 { font-size: 16px; font-weight: 700; }
.Sub { color: var(--mid); max-width: 62ch; }
.Lines { display: grid; gap: 7px; margin-top: 10px; }
.Lines i { display: block; height: 8px; border-radius: 5px; background: var(--box); }
.Lines i:nth-child(2) { width: 88%; } .Lines i:nth-child(3) { width: 72%; } .Lines i:nth-child(4) { width: 50%; }

.Img { position: relative; background: var(--box); border-radius: 10px; min-height: 120px; overflow: hidden; }
.Img::before, .Img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - .5px), #e2e5e8 50%, transparent calc(50% + .5px)); }
.Img::after { transform: scaleX(-1); }
.Img span { position: absolute; z-index: 1; left: 8px; bottom: 8px; padding: 2px 6px; background: #fff; border-radius: 4px; font-size: 11px; color: var(--mid); }
.Img--play::before { background: none; }
.Img--play::after { content: '▶'; display: grid; place-items: center; transform: none; background: none; font-size: 22px; color: var(--mid); }

.Btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border: 2px solid var(--ink); border-radius: 8px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; }
.Btn--ghost { background: #fff; color: var(--ink); }
.Btn--accent { background: var(--accent); border-color: var(--accent); }
.Row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.Grid { display: grid; gap: 12px; }
.G2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.G3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.G4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }

.Card { display: grid; gap: 8px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.Card--big { padding: 22px; min-height: 130px; }
.Card--link { text-decoration: none; transition: border-color .15s; }
.Card--link:hover { border-color: var(--ink); }
.Card .Arrow { margin-top: auto; font-weight: 700; }

.Stamp {
  display: grid; place-items: center; width: 92px; height: 92px; flex: none;
  border: 3px dashed var(--ink); border-radius: 50%;
  font-size: 11px; font-weight: 800; text-align: center; letter-spacing: .06em; line-height: 1.2; transform: rotate(-8deg);
}
.Stamp--sm { width: 56px; height: 56px; font-size: 8px; border-width: 2px; }

.Nisab { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--line); }
.Nisab div { padding: 12px 14px; background: #fff; }
.Nisab b { display: block; font-size: 20px; }
.Nisab small { color: var(--mid); }
.Live { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.Live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.Stat { padding: 14px 16px; border-left: 3px solid var(--box-2); background: #fff; border-radius: 0 10px 10px 0; }
.Stat b { display: block; font-size: 26px; line-height: 1.1; }
.Stat small { color: var(--mid); }

.Chip { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13px; }
.Chip[aria-pressed='true'] { border-color: var(--accent); background: var(--accent); color: #fff; }

.Faq details { border-top: 1px solid var(--line); padding: 12px 0; }
.Faq summary { font-weight: 600; cursor: pointer; }
.Faq p { color: var(--mid); margin-top: 6px; }

.Reels { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.Reel { aspect-ratio: 9 / 16; border-radius: 12px; }

.Chat { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.Bubble { max-width: 80%; padding: 8px 12px; border-radius: 12px; background: var(--box); font-size: 13px; }
.Bubble--me { justify-self: end; background: var(--ink); color: #fff; }
.Input { display: flex; gap: 8px; }
.Input span { flex: 1; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 8px; color: var(--mid); font-size: 13px; }

.Field { display: grid; gap: 4px; }
.Field label { font-size: 13px; font-weight: 600; }
.Field input { padding: 9px 10px; border: 1.5px solid var(--line); border-radius: 8px; font: inherit; }

/* Expanding boxes (IR style) */
.Boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.Boxes > button { display: grid; gap: 6px; text-align: left; padding: 18px; min-height: 110px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.Boxes > button[aria-expanded='true'] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.Boxes > button b { font-size: 16px; }
.Boxes > button small { color: var(--mid); }
.Panel { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 18px; padding: 18px; border: 1.5px solid var(--accent); border-radius: 10px; background: #fff; }
.Panel[hidden] { display: none; }
@media (max-width: 640px) { .Panel { grid-template-columns: 1fr; } }

.Hide { display: none !important; }

/* Notes */
.Note {
  position: relative; margin-top: 12px; max-width: 520px;
  padding: 10px 12px 10px 34px; border-radius: 4px;
  background: var(--note); color: var(--note-ink); font-size: 13px; line-height: 1.45;
  box-shadow: 2px 3px 0 rgb(0 0 0 / .08);
}
.Note::before { content: '✎'; position: absolute; left: 11px; top: 9px; }
.Note b { color: #3d3100; }
.Note--float { position: absolute; right: 16px; top: 16px; max-width: 300px; margin: 0; transform: rotate(1deg); z-index: 2; }
@media (max-width: 1000px) { .Note--float { position: relative; right: auto; top: auto; margin-top: 12px; transform: none; } }
body.no-notes .Note { display: none; }

.Abt { padding: 14px; border: 2px dashed var(--accent); border-radius: 10px; background: #fff; }
.Abt[hidden] { display: none; }

.Foot { padding: 30px 0 60px; color: var(--mid); font-size: 13px; }

/* Hub */
.Hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.Hub a { display: grid; gap: 10px; padding: 18px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; text-decoration: none; }
.Hub a:hover { border-color: var(--ink); }
.Hub .Thumb { height: 150px; display: grid; gap: 5px; padding: 8px; border-radius: 8px; background: var(--box); }
.Thumb i { display: block; border-radius: 3px; background: var(--box-2); }
.Tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--box); font-size: 12px; font-weight: 600; }
.Tag--rec { background: var(--accent); color: #fff; }
.Matrix { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; }
.Matrix th, .Matrix td { padding: 8px 10px; border: 1px solid var(--line); text-align: center; }
.Matrix th:first-child, .Matrix td:first-child { text-align: left; }
.Scroll { overflow-x: auto; }

/* Notes as small numbered tags: click one to read it */
.Note.is-pin { display: inline-flex; align-items: center; gap: 8px; max-width: none; padding: 4px 10px 4px 4px; border-radius: 999px; box-shadow: none; transform: none; cursor: pointer; font: inherit; font-size: 12px; border: 0; }
.Note.is-pin::before { content: none; }
.Note.is-pin .Note__n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--note-ink); color: var(--note); font-size: 11px; font-weight: 700; }
.Note.is-pin .Note__body { display: none; }
.Note.is-pin[aria-expanded='true'] { display: grid; grid-template-columns: 20px 1fr; align-items: start; max-width: 460px; padding: 8px 12px 10px 8px; border-radius: 10px; box-shadow: 0 6px 18px rgb(0 0 0 / .12); text-align: left; }
.Note.is-pin[aria-expanded='true'] .Note__body { display: block; grid-column: 2; }
.Note.is-pin[aria-expanded='true'] .Note__title { font-weight: 700; }
.Note--float.is-pin { position: absolute; }
@media (max-width: 1000px) { .Note--float.is-pin { position: relative; } }

/* Notes switch */
.Switch { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px !important; border-radius: 999px !important; background: #2c3238 !important; }
.Switch__track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #555c63; transition: background .2s; }
.Switch__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.Switch[aria-checked='true'] .Switch__track { background: #e6c200; }
.Switch[aria-checked='true'] .Switch__track::after { transform: translateX(14px); }
.Switch kbd { padding: 0 5px; border: 1px solid #555c63; border-radius: 4px; font: 11px var(--font); color: #aab0b6; }
.Hint { position: fixed; z-index: 60; top: 54px; left: 16px; max-width: 300px; padding: 12px 14px; border-radius: 10px; background: var(--note); color: var(--note-ink); font-size: 13px; box-shadow: 0 10px 30px rgb(0 0 0 / .2); }
.Hint::before { content: ''; position: absolute; top: -6px; left: 30px; width: 12px; height: 12px; background: var(--note); transform: rotate(45deg); }
.Hint button { margin-top: 8px; padding: 4px 10px; border: 0; border-radius: 6px; background: var(--note-ink); color: var(--note); font-size: 12px; font-weight: 600; }