/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #1B3A5C;
  color: #fff;
  padding: 8px 12px;
  z-index: 1000;
  border-radius: 0 0 6px 0;
  text-decoration: none;
  font-size: 15px;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid #146C2B;
}

body { 
	margin: 0;
	font-family: arial;
	padding: 0;
}
main {
  display: grid;
        min-height: 100vh;
	grid-template:
	'main'
	'below';
}
#calculator {
    max-width: 640px;
	margin: 0 auto;
	background: #F2F2F2;
	padding: 15px;
	display: grid;
	grid-area: main;
    grid-template-columns: 300px 300px;
    grid-template-rows: auto auto auto;
    grid-template-areas:
		"title  title"
        "calc   side"
		"instr  instr";
    gap: 20px;
}
    #calculator h1 {
        grid-area: title;
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }
    .calc-main {
        grid-area: calc;
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
	max-width: 300px;
    }
#display {
	background: #FFFFFF;
	padding: 7px;
	border-radius: 5px;
	margin-bottom: 0;
	min-height: 90px;
	text-align: right;
	font-family: monospace;
	font-size: 30px;
	border: 2px solid #CFCBC0;
	border-radius: 10px;
        display: flex;
        flex-direction: column;
        gap: 4px;
}
#display > div {
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	text-align: right;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
#display > div > * {
	direction: ltr;
	unicode-bidi: embed;
}
#resultDisplay {
	width: 100%;
	box-sizing: border-box;
	border: none;
	outline: none;
	background: transparent;
	font-family: monospace;
	font-size: 30px;
	text-align: right;
	padding: 0;
	margin: 0;			
}
.button-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}

button {
	padding: 4px;
	font-size: 23px;
	border: 2px solid #D4D4D4;
	border-radius: 10px;
	cursor: pointer;
	background: #FFFFFF;
        transition: background 0.08s ease, transform 0.04s ease;
}
.equals { background: #146C2B; color: white; border: none;}
.clear { background: #A02422; color: white; border: none;}
#backspace { background: #4A4A47; color: white; border: none;}
.operator { background: #1B3A5C; color: white; border: none; }

button:active {
	background: #E0E0E0;
	transform: translateY(1px);
}		
#backspace:active { background: #1F1F1D; }
.clear:active {background: #831C1A;}
.operator:active {background: #0E1F30;}
.equals:active {background: #0D451C;}

button:focus-visible {
	outline: 2px solid var(--accent);
        outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine){
	button:hover { background: #E0E0E0; }
	.operator:hover {background: #132A42;}
	#backspace:hover {background: #1F1F1D;}
	.clear:hover {background: #701918;}
	.equals:hover {background: #0D451C;}	
}


.history {
    box-sizing: border-box;
	margin-top: 0;
	border: 1px solid #ccc;
	padding: 0px 10px;	
	overflow-y: auto;
	overflow-wrap: break-word;
	font-family: monospace;
	background-color: #FFFFFF;
	border-radius: 10px;
    grid-area: side;
    flex-direction: column;
    min-height: 0;
	min-width: 300px;
    max-height: 447px;
	max-width: 300px;
}

#historyItems {
	text-align: right;
	font-size: 20px;
}

#historyItems:empty::before {
	content: "No calculations yet";
	display: block;
	text-align: center;
	color: var(--text-muted);
	font-style: italic;
	font-size: 13px;
	padding: 8px 0;
}
.expression {
	min-height: 22px;
	padding-bottom: px;
	font-size:18px; 
	color:#666;
}
#display > #mem {
	min-height: 18px;
	margin-left: 10px;
	text-align: left;
	font-size:15px; 
	color:#666;
}
.mem {
	padding: 2px;
	font-size: 18px;		
}


	#instructions {
		grid-area: instr;
		max-width: none;   /* let it span both columns */
		margin: 0;
		box-sizing: border-box;
		
		
		border: 1px solid #ccc;

		border-radius: 10px;
		background: #FFFFFF
	}
	  .key {
	  border-style: solid;
	  border-width: 1px;
	  padding: 1px 4px;
	  border-radius: 3px;
	  font-family: courier;
	}
	  .keyslim2 {
	  border-style: solid;
	  border-width: 1px;
	  padding: 1px 4px;
	  border-radius: 3px;
	  font-family: courier;
	  display: inline-block;
	}

	  .keyslim3 {
	  border-style: solid;
	  border-width: 1px;
	  padding: 1px 4px;
	  border-radius: 3px;
	  font-family: courier;
	  display: inline-block;

	}
    h2, h3 {
 	  font-family: arial;

	}
	
	h2 {
	  	font-size: 18px;
	}
	
	h3 {
		font-size: 16px;
	}	
	
	ul {
	  list-style-type: none;
	  padding: 0px 20px;
	  font-family: arial;  	
	  font-size: 17px;
	}

    .innerUL {
	  padding-inline-start: 40px;
    }
	
	.outerLi {	  
	  padding: 15px 5px;
	}
	
	li {
	  padding: 5px 0px;
	}
	
	.example {
	  color: green;
	}
	#instructions p {
		padding: 10px;
	}
	#instructions summary {
    cursor: pointer;
    padding: 10px;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#instructions summary h2 {
    margin: 0;
    display: inline-block;
}

#instructions summary::after {
    content: "▸";           /* collapsed */
    font-size: 14px;
    transition: transform 0.15s ease;
}

#instructions details[open] summary::after {
    content: "▾";           /* expanded */
}
	.a2a_kit a2a_kit_size_32 a2a_default_style {
		padding: 10px;
		margin: 10px;
	}
	#below {grid-area: below;
	 max-width: 640px;
    margin: 10px auto;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px
	}
	#below footer {	
		margin: 0;
	}
	

    body.privacy-page,
    body.cookies-page,
    body.terms-page {
        display: block;          /* override the body grid */
        font-size: 17px;
        line-height: 1.5;
        padding: 16px;
        max-width: 100%;
        overflow-x: hidden;
    }
	    body.privacy-page h2,
    body.cookies-page h2,
    body.terms-page h2 {
        font-size: 20px;
        line-height: 1.3;
        margin-top: 28px;
        margin-bottom: 8px;
    }
body.privacy-page p,
body.cookies-page p,
body.terms-page p {
    margin: 0;
}

body.privacy-page li,
body.cookies-page li,
body.terms-page li {
    padding: 2px 0;
}

body.privacy-page ul,
body.cookies-page ul,
body.terms-page ul {
    margin: 8px 0;
}
@media (max-width: 600px) {
	html,
	body {
		width: 100%;
		min-height: 100%;
		margin: 0;
	}

  #calculator {
		width: 100%;
		max-width: 100vw;
        overflow-x: hidden;
        box-sizing: border-box;
		height: auto;   
		min-height: 0;
		margin: 0;
		padding: 8px;
		gap: 8px;
		display: flex;
		flex-direction: column;
	}

  #calculator h1 {
    display: none;
  }

  .calc-main {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 75vh;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #display {
    width: 100%;
	min-width: 0;
    min-height: 90px;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  #display > div {
        min-width: 0;
        overflow-x: auto;
        white-space: nowrap;
    }
 #resultDisplay {
        min-width: 0;   /* add this */
		overflow-x: auto;      /* scroll long numbers */
        white-space: nowrap;   /* don't wrap */
    }

  .button-grid {
    width: 100%;
    flex: 1;
    min-height: 0;
    min-width: 0;   /* add this */
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 0.7fr repeat(6, minmax(0, 1fr));
    gap: 5px;
  }

  .button-grid button {
    width: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    padding: 5px;
    font-size: 25px;
    border-radius: 10px;
    touch-action: manipulation;
  }
	.button-grid button.mem {
		font-size: 20px;	
		padding: 4px;
	}
	.history {
		height: 20vh;
		width: 100%;
		min-width: 0;        /* was 300px */
        max-width: none;
	}
	#historyItems > * {
        margin: 0;
        padding: 2px 0;   /* tighten line spacing */
        line-height: 1.2;
    }
	#instructions {
        max-width: none;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }
	#below {
        max-width: none;
		width: 100%;
        margin: 10px 0;
        padding: 0 8px;
	}
    body.privacy-page,
    body.cookies-page,
    body.terms-page {
        display: block;          /* override the body grid */
        font-size: 17px;
        line-height: 1.5;
        padding: 16px;
        max-width: 100%;
        overflow-x: hidden;
    }

body.privacy-page h1,
    body.cookies-page h1,
    body.terms-page h1 {
        font-size: 26px;
        line-height: 1.25;
        margin-top: 0;
    }

    body.privacy-page h2,
    body.cookies-page h2,
    body.terms-page h2 {
        font-size: 20px;
        line-height: 1.3;
        margin-top: 28px;
        margin-bottom: 8px;
    }

    body.privacy-page p,
    body.cookies-page p,
    body.terms-page p,
    body.privacy-page li,
    body.cookies-page li,
    body.terms-page li {
        font-size: 17px;
        line-height: 1.35;
    }

    body.privacy-page ul,
    body.cookies-page ul,
    body.terms-page ul {
        padding-left: 20px;
        font-size: 17px;
    }

    body.privacy-page a,
    body.cookies-page a,
    body.terms-page a {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

  #below footer a {
    display: block;
    width: 100%;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
    margin: 6px 0;
    line-height: 24px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
    color: #1B3A5C;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
  }
  #below footer a:focus-visible {
    outline: 3px solid #146C2B;
    outline-offset: 2px;
  }

  /* AddToAny share buttons: 48×48 tap targets only on mobile */
  .a2a_kit a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    margin: 4px;
    border-radius: 8px;
  }
  .a2a_kit a:focus-visible {
    outline: 3px solid #146C2B;
    outline-offset: 2px;
  }
}
  
/* On mobile, make footer links full-width-ish and easy to tap */
@media (max-width: 600px) {
  #below footer a {
    display: block;
    width: 100%;
    margin: 6px 0;
    text-align: center;
  }
  .a2a_kit a {
    min-width: 48px;
    min-height: 48px;
  }
}